react中的onClick函數不適用於條件句

Question

我對“ onClick”功能為什么不起作用有疑問？ 當我按下按鈕時，它只會收到“您還不夠大！”。 我使用輸入字段。

import React, { Component } from 'react';



class App extends Component {
   constructor() {
    super();
     this.state= {
      term: 'write a number'
      }
     this.change = this.change.bind(this);
    }

   change = (event) => {
    this.setState({term: event.target.value >= 18 ? <p>You are old enough! 
  </p> : <p>You are not old enough!</p>});
  }

   render() {

     return (
       <div style={{textAlign : "center"}}>
       <input type="text"></input><br></br>
        <p>Result</p><br></br>
        {this.state.term}
        <button type="submit" onClick={this.change}>Submit</button>
      </div>
    );
  }
}

export default App;

Answer 1

如果要在單擊時驗證輸入，請以狀態存儲輸入的值。

class App extends Component {
  constructor() {
    super();
    this.state = {
      term: 'write a number',
      value: ''
    };
  }

  handleChange = event => {
    this.setState({
      value: event.target.value
    });
  };

  validate = () => {
    this.setState({
      term:
        parseInt(this.state.value) >= 18
          ? 'You are old enough!'
          : 'You are not old enough!'
    });
  };

  render() {
    return (
      <div style={{ textAlign: 'center' }}>
        <input
          type="text"
          onChange={this.handleChange}
          value={this.state.value}
        />
        <br />
        <p>Result</p>
        <br />
        <p>{this.state.term}</p>
        <button type="submit" onClick={this.validate}>
          Submit
        </button>
      </div>
    );
  }

}

Answer 2

您可以為輸入創建處理程序，然后單擊按鈕從狀態中獲取值。 看看我的方法。

應用程序類擴展了React.Component {state = {age：null，term：'write a number'}

onClick = () => {
    if(this.state.age) {
        const output = this.state.age >= 18 ? 
            <p>You are old enough!</p> :
            <p>You are not old enough!</p>
    this.setState({
        term: output
    });
}

onInputHandler = (event) => {
    this.setState({age: event.target.value})
}

render() {
    return (
        <div style={{textAlign : "center"}}>
            <input type="text" onChange={e => this.onInputHandler(e)}></input><br></br>
        <p>Result</p><br></br>
        <button onClick={this.onClick}>Submit</button>
        </div>);
}

}