反应：当用户选择第三个选项时，我想更新状态

Question

我正在尝试更新状态值，例如，如果用户从select中选择第三个选项，那么我想更新状态值。 我尝试过，但是状态值没有改变，有人可以帮助我如何解决此问题。 谢谢

码

class Calendar extends Component {
    constructor(){
        super();
        this.state={
            isCustomer:false
        }
    }
render(){
return(
  <select>
   <option value="1">1</option>
   <option value="2">1</option>
   <option value="3" onChange={this.setState({isCustomer:true})}>1</option>
  </select>
)}

export default Calendar

Answer 1

您可以通过在select （而非选项）中使用onChange事件来实现。 然后，您可以检查所选的值是否为第三个值。

工作示例：

 class Calendar extends React.Component { state = { isCustomer: false } onChange = ev => { this.setState( {isCustomer:ev.target.value === "3"}, () => { console.log(this.state.isCustomer) }) } render(){ return( <div> <select onChange={this.onChange}> <option value="1">1</option> <option value="2">54</option> <option value="3">Customer</option> </select> {this.state.isCustomer && <input defaultValue="Hi customer :)"></input>} </div> ) } } ReactDOM.render(<Calendar/>, document.getElementById('root')) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id='root'> 

Answer 2

您直接在更改时调用函数，它将导致无限状态，您可以做的是：

class Calendar extends Component {
constructor(){
        super();
        this.state={
            isCustomer:false
        }
    } 
   handleChange = (e) => {
     console.log(e.target.value)
      if(e.target.value==="3"){
       this.setState({isCustomer:true})
      }
   } 

render(){
  console.log(this.state);
return(
  <select  onChange={this.handleChange}>
   <option value="1">1</option>
   <option value="2">1</option>
   <option value="3" >1</option>
  </select>
)
}    
}

export default Calendar

代码演示： https : //stackblitz.com/edit/react-dxheff

Answer 3

您需要在select标签而不是option标签上使用onChange事件。

然后将一些其他逻辑应用于事件处理程序，以检查是否已选择所需的选项。

这是工作中的沙箱： https : //codesandbox.io/s/peaceful-sound-v0stt

import React, { Component } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class Calendar extends Component {
  constructor() {
    super();
    this.state = {
      isCustomer: false
    };
  }

  handleOnChange = e => {
    if (e.target.value == 3) {
      this.setState({ isCustomer: true });
    }
  };

  render() {
    console.log(this.state.isCustomer);
    return (
      <div>
        <select onChange={this.handleOnChange}>
          <option value="1">1</option>
          <option value="2">1</option>
          <option value="3">1</option>
        </select>
        {this.state.isCustomer ? <input placeholder="name" /> : ""}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Calendar />, rootElement);

对于您的alert（）特定问题。 只需在回调函数中触发警报，如下所示：

  onChangeHandler = e => {
    if (e.target.value == 3) {
      this.setState(
        {
          isCustomer: true
        },
        () => alert("It is working")
      );
    }
  };

Answer 4

首先，您不能将事件嵌入到option上，因此必须将onChange事件绑定到select ragn上。第二件事，您必须在事件内部传递函数，而不是直接指示。

我不完全知道您想要实现什么，但是上面的代码片段可能会有所帮助，它仅将isCustomer状态设置为选项值3

 class Calendar extends React.Component { constructor(props) { super(props); this.state = { isCustomer: false } } selectChange = (evt) => { let val = evt.target.value; this.setState({ isCustomer: val === "3" }, () => { document.getElementById("state").innerHTML ="state is :" + JSON.stringify(this.state); }) } render() { return ( <select onChange ={ (e) => this.selectChange(e) } > <option value = "1" > 1 < /option> <option value = "2" > 2 < /option> <option value = "3" > 3 < /option> </select> ) } } ReactDOM.render( < Calendar / > , document.getElementById("calendar")); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.0/umd/react-dom.production.min.js"></script> <div id="calendar"></div> <pre id="state"></pre>