處理<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} />