如何通过 React <select> 组件传递多个参数？

Question

这是我的 <select> 组件：

handleSelect: function(myVar, anotherVar) {
  // Do I need to somehow use event.preventDefault(); here?
  // I want to be able to do something with myVar and anotherVar here...
  // ...but it seems I cannot access the event and the value of anotherVar
  // at the same time...at least not this way.
},
render: function() {
  let myVar = "Yes",
      anotherVar = "Another value",
      id = 1;
  return (
    <select defaultValue={myvar} onChange={this.handleChange.bind(this, anotherVar}>
      <option value="Yes">Yes</option>
      <option value="No">No</option>
    </select>
  );
}

我希望能够在我的 handleSelect 函数中使用 myVar（基于 <select> 输入的值）和 anotherVar。在这种情况下，如何正确传递 <select> 元素的值？

Answer 1

两个变量都应该是状态并在构造函数中定义：

class FooComponent extends Component {
   constructor(props) {
      super(props);
      this.state = { myvar: 'foo', anotherVar : '' };
 }
 handleSelect(event){
     this.setState({anotherVar: event.target.value}, console.log('My var ' + this.state.myvar));
 }
 render(){
    return(
       <div>
           <select id="blabla" onChange={this.handleSelect.bind(this)} value={this.state.myvar}>
              <option value="select">Select</option>
              <option value="Java">Java</option>
              <option value="Ruby">Ruby</option>
           </select>
           <p></p>
           <p>{this.state.anotherVar}</p>
       </div>
    );
 }

Answer 2

我的解决方案是意识到当您使用 bind 将变量传递给 handleSelect 之类的函数时，event 仍然被传递。

我可以在 <select> 元素中使用 onChange={this.handleChange.bind(this, anotherVar} 并像这样访问变量：

handleSelect: function(anotherVar, event) {
  event.preventDefault();
  let myVar = event.target.value;
  ...rest of my code using myVar and anotherVar...
},

如何通过 React <select> 组件传递多个参数？

How can I pass multiple parameters through a React <select> component?

reactjs

react-jsx