反应：对象未定义 no-undef

Question

我制作了TempCalculator组件，它将计算水在​​给定温度下是否会沸腾。 此外，它还为当前输入值呈现 BoilingVerdict。

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"))

错误'temperature' is not defined no-undef

Answer 1

那是因为temperature是一种状态。 像这样使用：

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

Answer 2

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"))

谢谢，已解决