選択リストがReactJSで機能しない

Question

onChangeイベントがトリガーされていない選択リストに問題があります。選択リストから選択した値をthis.state変数に設定することはできません。どんな助けもありがとう。

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") 
 
)

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

Answer 1

あなたはあなたの選択、入力の変化にトリガーされるイベントを送信されませんが、あなただけのも

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

で関数を呼び出している、あなたはしませんでした選択した入力に任意の名前を割り当てます。

にあなたの選択入力を更新してください：私もselectActivityで小道具からname属性を使用して渡していませんでした

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