Question

我正在写一个将温度从Celcius转换为Fahrenheit的页面。

用户在第一个输入字段中给出温度，单位为celcius，那么onChange应该调用函数convertCelciustoFahr。

convertCelciustoFahr通过函数this.setState（）更改state.fahrenheit，并且fahrenheit中的温度应更新为第二个输入字段。

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没有更新值到华氏度输入字段？

Answer 1

使用

绑定

 this.convertCelciustoFahr = this.convertCelciustoFahr.bind(this);

React：onChange不将值更新为输入字段

1 个答案: