javascript - React setState 异步导致下拉延迟

Question

我试图用默认值制作一个下拉列表。

因此，例如，它在开头显示“年”，点击后用户应该看到 1987 作为默认值。

所以我有 this.setState 来操作下拉列表的默认值。

我在台式机和 Android 手机上运行良好。

但是当我使用 iPhone 时，Chrome 和 Safari 都不能很好地工作。(我第一次点击时显示年份，再次点击后显示 1987)

class MobileBind extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      birthYear: '',
      defaultYear: true,
    };


  }

  render() {
    const {
      birthYear,
   } = this.state;

    const createNumberSet = (min = 0, max = 10) => {
      if (min > max)
        return [];

      return Array(max - min + 1)
        .fill(min)
        .map((value, index) => value + index)
        .filter(value => value >= min);
    };

    const currentYear = moment().year();
    const years = createNumberSet(currentYear - 100, currentYear);
    const months = createNumberSet(1, 12);
    const days = createNumberSet(1, 31);

    return (
             <div className={style['birth-date-input']} style={{ margin: 0 }}>
                <FormControl>
                  <Select name="birthYear"
                    defaultValue={birthYear}
                    onChange={this.handleChange}
                    onClick={this.handleDefalutYear}
                    native>
                    {
                      [
                      <option key="birthYear-default" value="" disabled >
    Year</option>,
                      ...(years || []).map(value => <option key={`birthYear-${value}`} value={value} >{value}</option>)
                      ]
                    }
                  </Select>
                </FormControl>
              </div>

  }


  handleChange = event => {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({ [name]: value });
  }

  handleDefalutYear = () => {
      this.setState({defaultYear:false});
  }

我希望可以立即更改默认值(只需单击一次!`)

Answer 1

使用 defaultValue 是为了播种不受控制的组件。由于您正在控制组件(您有一个 onChange 并且您正在将 value 设置为 state)，因此将 birthYear 传递给 value 属性，而不是 defaultValue。