反应单选按钮未设置初始值；只有后续值

Question

我有一个带有 4 个无线电输入的表单。我希望使用检查输入的值更新组件状态。

当前输入是检查值后面的一个值（即直到第二次点击才开始正确更新状态）。

如何让它在第一次点击时设置状态？

component.js

import React, { Component } from 'react';

class Graph extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      option: null
    };
  }

  setOption(value) {
    this.setState({option: value});
  }

  render() {
    return (
      <form>
        <input
        type="radio"
        name="option"
        onChange={(e) => this.setOption('tmax_C')}
        checked={ this.state.option === 'tmax_C' }
        value="tmax_C" />
        <label htmlFor="option">Max Temp.</label>

        <input type="radio"
        name="option"
        onChange={(e) => this.setOption('tmin_C')}
        checked={ this.state.option === 'tmin_C' }
        value="tmin_C" />
        <label htmlFor="option">Min Temp</label>

        <input type="radio"
        name="option"
        onChange={(e) => this.setOption('rain_mm')}
        checked={ this.state.option === 'rain_mm' }
        value="rain_mm" />
        <label htmlFor="option">Rain mm</label>

        <input type="radio"
        name="option"
        onChange={(e) => this.setOption('sunshine_hours')}
        checked={ this.state.option === 'sunshine_hours' }
        value="sunshine_hours" />
        <label htmlFor="option">Sunshine Hours</label>
      </form>
    );
  }
}

export default Graph;

Answer 1

设置组件状态是异步的。使用函数会立即更新组件：this.setState(() => ({option: value}));

更多信息：react setState docs

根据您问题的第二部分：使处理程序更具功能性的另一种方法是返回一个设置传递值的处理程序：

import React, { Component } from 'react';

class Graph extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      option: null
    };
  }

  setOption = (value) =>
    this.setState(() => {
      return { option: value };
    });


  render() {
    return (
      <form>
        <input
        type="radio"
        name="option"
        onChange={this.setOption('tmax_C')}
        checked={ this.state.option === 'tmax_C' }
        value="tmax_C" />
        <label htmlFor="option">Max Temp.</label>

        <input type="radio"
        name="option"
        onChange={this.setOption('tmin_C')}
        checked={ this.state.option === 'tmin_C' }
        value="tmin_C" />
        <label htmlFor="option">Min Temp</label>

        <input type="radio"
        name="option"
        onChange={this.setOption('rain_mm')}
        checked={ this.state.option === 'rain_mm' }
        value="rain_mm" />
        <label htmlFor="option">Rain mm</label>

        <input type="radio"
        name="option"
        onChange={this.setOption('sunshine_hours')}
        checked={ this.state.option === 'sunshine_hours' }
        value="sunshine_hours" />
        <label htmlFor="option">Sunshine Hours</label>
      </form>
    );
  }
}

export default Graph;