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

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

工作示例：

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上嵌入事件，因此必须在选择ragn上绑定onChange事件第二件事，您必须在事件内部传递一个函数，而不是直接指示..

我不确定您要实现的目标，但上面的代码段可能会有所帮助，它仅将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>

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

4 个答案: