1
気温を華氏から華氏に変換するページを書いています。React：onChange値を入力フィールドに更新しない
ユーザーは、最初の入力フィールドの温度を摂氏で表します。 次に、関数changeCelciustoFahrを呼び出す必要があります。
convertCelciustoFahrはstate.fahrenheitをthis.setState（）で変更し、華氏での温度を2番目の入力フィールドに更新します。ここで
class App extends Component {
constructor(props){
super(props);
this.state = {
//Temperature in fahrenheit
fahrenheit: 0,
//Temperature in celcius
celcius: 0,
};
//Binding
this.convertCelciustoFahr = this.convertCelciustoFahr.this;
}
//Converts celcius to fahrenheit
convertCelciustoFahr(event){
var celcius = Number(event.target.value);
this.setState(function(state,props){
return{
fahrenheit: (celcius-32)/(5/9),
}
}
)
}
render() {
return (
<div className="App">
<h1>Celcius to Fahrenheit converter</h1>
<form id="conversion">
<input className="Celcius" placeholder="°C" onChange={this.convertCelciustoFahr} />
<p>=</p>
<input className="Fahrenheit" value={this.state.fahrenheit} placeholder="°F" />
</form>
</div>
);
}
}
export default App;
はhtmlです：
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root">
<div data-reactroot="" class="App">
<h1>Celcius to Fahrenheit converter</h1>
<form id="conversion">
<input class="Celcius" placeholder="°C">
<p>=</p>
<input class="Fahrenheit" value="0" placeholder="°F">
</form>
</div>
</div>
Javascriptが有効になっていないと、onChangeイベントがトリガされていないようです。
なぜonChange値を華氏の入力フィールドに更新しないのですか？
を使用。 – puolimatkankrouvi
あなたが正しいようです。 –