Question

这是我的＆lt; select＆gt;零件： handleSelect：function（myVar，anotherVar）{ //我需要以某种方式使用event.preventDefault（）;这里？ //我希望能够在这里使用myVar和anotherVar做些什么...... // ...但似乎我无法访问事件和anotherVar的值 //同时......至少不是这样的。 }， render：function（）{ 让myVar =＆＃34;是＆＃34;， anotherVar =＆＃34;另一个值＆＃34;， id = 1; 回来（＆lt; select defaultValue = {myvar} onChange = {this.handleChange.bind（this，anotherVar}＆gt; ＆lt; option value =＆＃34;是＆＃34;＆gt;是＆lt; / option＆gt; ＆lt; option value =＆＃34; No＆＃34;＆gt; No＆lt; / option＆gt; ＆LT; /选择＆GT; ）; } 我希望能够使用myVar（基于＆lt; select＆gt;输入值）和handleSelect函数中的anotherVar。如何正确传递＆lt; select＆gt;的值？在这种情况下的元素？

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

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

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

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

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

2 个答案: