Javascript 反应：未定义对象无未定义

我制作了componentTempCalculator，它将计算水在给定温度下是否会沸腾。此外，它还呈现当前输入值的BoilingDedict

const BoilingPeek = (props) => {
  return props.celsius >= 100 ? (
    <p>Water would boil.</p>
  ) : (
    <p>Water is would not boil.</p>
  );
};

class TempCalculator extends React.Component {
  constructor(props) {
    super(props);
    this.handleTempChange = this.handleTempChange.bind(this);
    this.state = {
      temperature: "",
    };
  }

  handleTempChange(event) {
    this.setState({ temperature: event.target.name });
  }

  render() {
    return (
      <fieldset>
        <legend>Temprature of water in celsius</legend>
        <input name={temperature} onChange={this.handleTempChange} />
        <BoilingPeek celsius={parseFloat(temperature)} />
      </fieldset>
    );
  }
}
ReactDOM.render(<TempCalculator/>,document.getElementById("root"))

const BoilingPeek=（道具）=>{
返回道具。摄氏度>=100(
水会沸腾

) : (
水是煮不开的

);
};
类TempCalculator扩展了React.Component{
建造师（道具）{
超级（道具）；
this.handleTempChange=this.handleTempChange.bind（this）；
此.state={
温度：“，
};
}
handleTempChange（事件）{
this.setState（{temperature:event.target.name}）；
}
render（）{
返回(
水温（摄氏度）
);
}
}
ReactDOM.render（，document.getElementById（“根”））

错误

---

未定义“温度”无未定义，这是因为
温度
是一种状态。这样使用：

<input name={this.state.temperature} onChange={this.handleTempChange} />
<BoilingPeek celsius={parseFloat(this.state.temperature)} />



const BoilingPeek=（道具）=>{
返回道具。摄氏度>=100(
水会沸腾

) : (
水是煮不开的

);
};
类TempCalculator扩展了React.Component{
建造师（道具）{
超级（道具）；
this.handleTempChange=this.handleTempChange.bind（this）；
此.state={
温度：“，
};
}
手工更改（e）{
this.setState（{temperature:e.target.value}）；
}
render（）{
返回(
水温（摄氏度）
);
}
}
ReactDOM.render（，document.getElementById（“根”））

谢谢，问题解决了
没错-你还没有定义温度

。你的意思可能是

这个.state.temperature

？（我想是的，但您很快就会发现代码中的其他问题…）

const BoilingPeek = (props) => {
  return props.celsius >= 100 ? (
    <p>Water would boil.</p>
  ) : (
    <p>Water is would not boil.</p>
  );
};

class TempCalculator extends React.Component {
  constructor(props) {
    super(props);
    this.handleTempChange = this.handleTempChange.bind(this);
    this.state = {
      temperature: "",
    };
  }
  handleTempChange(e) {
    this.setState({ temperature: e.target.value });
  }

  render() {
    return (
      <fieldset>
        <legend>Temprature of water in celsius</legend>
        <input
          value={this.state.temperature}
          onChange={this.handleTempChange}
        />
        <BoilingPeek celsius={parseFloat(this.state.temperature)} />
      </fieldset>
    );
  }
}


ReactDOM.render(<TempCalculator/>,document.getElementById("root"))