选择列表不在ReactJS中工作

Question

我在选择列表中遇到问题，onChange事件未被触发。我无法设置从this.state变量中的选择列表中选择的值。任何帮助将不胜感激。

＆＃13;

＆＃13;

class SelectActivity extends React.Component{
    render(){
      return (
      <select value={this.props.value} onChange={() =>{this.props.onSelect()}}> {this.props.items.map((item,index) =>{
          return <option value={index}>{item}</option>})}
      </select>
      )
    }
  }
class Form extends React.Component{
  constructor(props){
    super(props)
    this.state = {first:"",last:"",activity:0,restriction:{a:false,b:false,c:false}}
    this.handleChange = this.handleChange.bind(this)
  }
  handleChange(event){
    this.setState({[event.target.name]:event.target.value},()=>{console.log(this.state)})
    
  }
  handleCheck(key) {
    return function (event) {
      var restriction = Object.assign({},this.state.restriction);
      restriction[key] = event.target.checked;
      this.setState({restriction:restriction},()=>{console.log(this.state)});
    }.bind(this);
  }
  render(){
    return(
      <form>
        <div>
          First Name<input name="first" value={this.state.first} onChange={this.handleChange}/>
        </div>
        <div>
          Last Name<input name="last" value={this.state.last} onChange={this.handleChange}/>
        </div>
        <div>
          <input type="checkbox" checked={this.state.restriction.a} onChange={this.handleCheck("a")}/>
          <label>a) Dietarty Restriction</label>
        </div>
        <div>
          <input type="checkbox" checked={this.state.restriction.b} onChange={this.handleCheck("b")}/>
          <label>b) Physical Disablities</label>
        </div>
        <div>
          <input type="checkbox" checked={this.state.restriction.c} onChange={this.handleCheck("c")}/>
          <label>c) Medical Needs</label>
        </div>
        <div>
          <SelectActivity name="activity" items={["Science Lab","Swimming","Painting","Cooking"]} value={this.state.activity} onSelect={this.handleChange}/>
        </div>
      </form>                                 
    )
  }
}

ReactDOM.render(
    <Form/>,
    document.getElementById("root")
)

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>
<div id="root"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您没有发送更改选择输入时触发的事件，但您只是使用

调用该函数

onChange={ () => {this.props.onSelect()} }

此外，您没有为选择输入分配任何名称。

请将您的选择输入更新为：

<select 
    value={this.props.value} 
    name={this.props.name}
    onChange={this.props.onSelect} // assigning the function, so it can be trigged with all argument
>
    {
        this.props.items.map((item,index) => {
            return <option value={index}>{item}</option>
        })
    }
</select>

class SelectActivity extends React.Component{
    render(){
      return (
      <select value={this.props.value} name={this.props.name} onChange={this.props.onSelect}> {this.props.items.map((item,index) =>{
          return <option value={index}>{item}</option>})}
      </select>
      )
    }
  }
class Form extends React.Component{
  constructor(props){
    super(props)
    this.state = {first:"",last:"",activity:0,restriction:{a:false,b:false,c:false}}
    this.handleChange = this.handleChange.bind(this)
  }
  handleChange(event){
    this.setState({[event.target.name]:event.target.value},()=>{console.log(this.state)})
    
  }
  handleCheck(key) {
    return function (event) {
      var restriction = Object.assign({},this.state.restriction);
      restriction[key] = event.target.checked;
      this.setState({restriction:restriction},()=>{console.log(this.state)});
    }.bind(this);
  }
  render(){
    return(
      <form>
        <div>
          First Name<input name="first" value={this.state.first} onChange={this.handleChange}/>
        </div>
        <div>
          Last Name<input name="last" value={this.state.last} onChange={this.handleChange}/>
        </div>
        <div>
          <input type="checkbox" checked={this.state.restriction.a} onChange={this.handleCheck("a")}/>
          <label>a) Dietarty Restriction</label>
        </div>
        <div>
          <input type="checkbox" checked={this.state.restriction.b} onChange={this.handleCheck("b")}/>
          <label>b) Physical Disablities</label>
        </div>
        <div>
          <input type="checkbox" checked={this.state.restriction.c} onChange={this.handleCheck("c")}/>
          <label>c) Medical Needs</label>
        </div>
        <div>
          <SelectActivity name="activity" items={["Science Lab","Swimming","Painting","Cooking"]} value={this.state.activity} onSelect={this.handleChange}/>
        </div>
      </form>                                 
    )
  }
}

ReactDOM.render(
    <Form/>,
    document.getElementById("root")
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>
<div id="root"></div>