ハンドル<select> ReactJSフォームでのコンポーネントの変更

Question

ReactJS n00b、onClickコールバックを使用して、ReactJS内で単純で再利用可能な< select>コンポーネントを構築しようとしています。私は、コンソールやWebpackのエラーは表示されませんが、選択したオプションを変更すると何も起こりません。

Caster.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { SelectSchool } from './SelectSchool'; 
import { Button } from './Button'; 

export class Caster extends React.Component { 
    constructor(props) { 
     super(props); 
     ... 
     this.handleChange = this.handleChange.bind(this); 
     this.handleClick = this.handleClick.bind(this); 
    } 

    handleChange(e){ 
     console.log('handleChange'); // TEST - nothing appears in console 

     var value = e.target.value; 
     this.setState({casterSchool: value}); 
     this.props.select(value); 

     console.log('value: ' + value); // TEST - nothing appears in console 
    } 

    render() { 
     return (
      <div className="instance-wrap"> 
       <div className="input-row"> 
        <SelectSchool phaseSelect="select-caster" onChange={this.handleChange} /> 
        ... 
       </div> 
      </div> 
     ); 
    } 
} 

SelectSchool.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 

export class SelectSchool extends React.Component { 
    render() { 
     return (
      <div className="input-wrap"> 
       <label>School</label> 
       <select className={this.props.phaseSelect} value={this.props.value} onChange={this.props.handleChange}> 
        <option value='alteration'>Alteration</option> 
        ... 
        <option value='divination'>Divination</option> 
       </select> 
      </div> 
     ); 
    } 
} 

SelectSchool.defaultProps = { phaseSelect: 'default' }; 

すべてのヘルプやアドバイスを非常に高く評価されます。

Answer 1

あなたはあなたの例では<SelectSchoolに渡す小道具の名前はonChangeですが、部品の内側にあなたがthis.props.handleChangeにアクセスしようとしている（そのような小道具はありません）。

this.prop.onChangeを使用するか、handleChange={this.handleChange}をコンポーネントに渡す必要があります。

オプション1：

<select className={this.props.phaseSelect} value={this.props.value} onChange={this.props.onChange}> 

オプション2：それをキャッチするため

<SelectSchool phaseSelect="select-caster" handleChange={this.handleChange} />