如何使用 react 根据选择输入更改 handleChange 操作？

Question

我有一些手工施工操作需要选择，选择它将在选择它将触发所选的handlechange操作，以下是代码：

handleChange 动作：

handleEqualChange(event){
this.setState({
  equal: event.target.value,
 });
}

handleNotEqualChange(event){
this.setState({
  notequal: event.target.value,
 });
}

handleGreaterThanChange(event){
this.setState({
  greater_than: event.target.value,
 });
}

handleSmallerThanChange(event){
this.setState({
  smaller_than: event.target.value,
 });
}

handleGOEChange(event){
this.setState({
  goe: event.target.value,
 });
}

handleLOEChange(event){
this.setState({
  loe: event.target.value,
 });
}

下拉菜单选择选项：

<select>
 <option value={this.state.equal}>Equal to</option>
 <option value={this.state.notequal}>Not equal to</option>
 <option value={this.state.greater_than}>Greater than</option>
 <option value={this.state.smaller_than}>Less than</option>
 <option value={this.state.goe}>Greater than or equal to</option>
 <option value={this.state.loe}>Less than or equal to</option>
</select>

文本输入：

<input className="col-md-1" type="text" placeholder="10" 
value={this.state.greater_than} onChange={this.handleGreaterThanChange} required/>

我想将文本输入的值传递给 redux 操作，但它始终返回为 {this.state.greater_than} 值，我想在选项中选择 {this.state.smaller_than} 时喜欢它会传递 {this.state.smaller_than} 值并触发 {this.handleSmallerThanChange} 操作，我可以知道该怎么做吗？谢谢。

我喜欢这样的 redux 操作：

export function createEvents(id, equal, notequal, greater_than, smaller_than, goe: goe, loe: loe, topic, email, contact) {
return (dispatch) => { // optionally you can have getState as the second argument
dispatch({
  type: EVENTS_CREATE_EVENTS_BEGIN,
});
const promise = new Promise((resolve, reject) => {
  // doRequest is a placeholder Promise. You should replace it with your own logic.
  // See the real-word example at:  https://github.com/supnate/rekit/blob/master/src/features/home/redux/fetchRedditReactjsList.js
  // args.error here is only for test coverage purpose.
  //const doRequest = args.error ? Promise.reject(new Error()) : Promise.resolve();
  axios.get('http://192.168.10.124:3000/api/Limits?filter[where][topic]=' + topic)
    .then(res => {
      console.log(res.data[0].id);

        axios.put('http://192.168.10.124:3000/api/Limits/' + res.data[0].id, { equal: equal, notequal: notequal, greater_than: greater_than, smaller_than: smaller_than, goe: goe, loe: loe, topic: topic, email: email, contact: contact }, {
          headers: {
            'Content-Type': 'application/json'
          }
        }).then(
          (res) => {
            dispatch({
              type: EVENTS_CREATE_EVENTS_SUCCESS,
              data: res,
            });
            resolve(res);
            //window.location = '/events/events-page';
          },
          // Use rejectHandler as the second argument so that render errors won't be caught.
          (err) => {
            dispatch({
              type: EVENTS_CREATE_EVENTS_FAILURE,
              data: { error: err },
            });
            reject(err);
          },
        );
      });
    })
    .catch(err => {
      console.log(err);
    });

return promise;
};
}

handleChange 动作修改：

handleChange(event){
console.log("Event.target.value is", event.target.value);
 this.setState({selectedOption: event.target.value});
  if(this.state.selectedOption=="equal"){
   this.setState({equal: event.target.value});
  };
  if(this.state.selectedOption=="notequal"){
   this.setState({notequal: event.target.value});
  };
  if(this.state.selectedOption=="greater_than"){
   this.setState({greater_than: event.target.value});
  };
  if(this.state.selectedOption=="smaller_than"){
   this.setState({smaller_than: event.target.value});
  };
  if(this.state.selectedOption=="goe"){
   this.setState({goe: event.target.value});
  };
  if(this.state.selectedOption=="loe"){
   this.setState({loe: event.target.value});
  };
}

Answer 1

我认为您没有正确处理选择。为什么您的选项值处于该状态？您的选择没有事件处理程序，选择值是什么？为什么你的输入只有 handleGreaterThanChange？

但是，您要做的是将所选值置于状态，并让 select 处理所选选项的更改。

代码如下：

class Hello extends React.Component {
    constructor(props){
    super(props);

    this.state = {
        selectedOption:"equal"
    }

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event){
    console.log("Event.target.value is", event.target.value);

    this.setState({selectedOption:event.target.value});
  }

  render() {
    return (
    <div>
       <select value={this.state.selectedOption} onChange={this.handleChange}>
         <option value={"equal"}>Equal to</option>
         <option value={"notequal"}>Not equal to</option>
         <option value={"greater_than"}>Greater than</option>
         <option value={"smaller_than"}>Less than</option>
         <option value={"goe"}>Greater than or equal to</option>
         <option value={"loe"}>Less than or equal to</option>
      </select>
    </div>
    );
  }
}

ReactDOM.render(
  <Hello/>,
  document.getElementById('container')
);

你可以试试this jsFiddle。