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

Question

我有一些 handleChange Action 需要被选中，当被选中时它会触发选中的 handleChange Action ，下面是代码:

handleChange Action :

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 Action 是这样的:

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 Action 修改:

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

我认为您没有正确处理选择。为什么您的期权值(value)处于状态？您的选择没有事件处理程序，选择值是多少？为什么只有 handleGreaterThanChange 的输入？

但是，您要做的是将所选值放入状态，并让选择处理所选选项的更改。

代码如下:

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 试试.