切り替え案件的なものをやるときにちょっとハマりかけたので、忘備録として。

react-semantic-uiでのinputのonChange

onChangeで呼び出す関数の第二引数から値を取り出します。

// 前略

class Sample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sample: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(e, { name, value }) {
    this.setState({ [name]: value });
  }
  render() {
    return (
      <Input
        onChange={this.handleChange}
        name="sample"
        value={this.state.sample}
      />
    );
  }
}

reactstrapでのinputのonChange

targetの値が第一引数のオブジェクト内に入ってきます。

// 前略

class Sample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sample: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange({ target }) {
    const { name, value } = target;
    if (!name || !value) return;
    this.setState({ [name]: value });
  }
  render() {
    return (
      <Input
        onChange={this.handleChange}
        name="sample"
        value={this.state.sample}
      />
    );
  }
}

おわりに

第一引数か第二引数かの違いですが、間違えるとエラーが出て焦るので気をつけましょう。