更改 react.js 中的选择值

Question

我需要你的帮助 ！

我正在为我的公司做一个项目，我应该创建一个可以与 React 重复的选择字段。所以，当我想保存我的选择时，我遇到了一个小问题，如果我刷新页面，默认选项仍然相同（而不是选定的选项）。有我的 select.js 代码：

import React, { Component, PropTypes } from 'react';

class Select extends React.Component {

  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(data) {
    this.setState({value:data.value});
  }

  render() {
    return (
        <label>
          <select className="widefat" name={this.props.name} onChange={this.handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
    );
  }
}

export default Select;

我更改了默认值：

当我更改选择选项时

刷新后

我认为这是因为在 select.js 中它将值初始化为 '' 并且不保存选择但我不知道如何保存选择。

Answer 1

这是实现此目的的方法：

import React, { Component, PropTypes } from 'react';

class Select extends Component {

  constructor(props) {
    super(props);
    this.state = { value: props.value }; // can be initialized by <Select value='someValue' />
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  render() {
    return (
        <label>
          <select className="widefat" value={this.state.value} name={this.props.name} onChange={this.handleChange.bind(this)}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
    );
  }
}

export default Select;

走得更远

您可以在渲染方法中的地图中迭代以实现如下：

  render() {
    const dictionary = [
      { value: 'grapefruit', label: 'Grapefruit' },
      { value: 'lime', label: 'Lime' },
      { value: 'coconut', label: 'Coconut' },
      { value: 'mango', label: 'Mango' }
    ];

    return (
        <label>
          <select
            className="widefat"
            value={this.state.value}
            name={this.props.name}
            onChange={this.handleChange}
          >
            {dictionary.map(
              // Iterating over every entry of the dictionary and converting each
              // one of them into an `option` JSX element
              ({ value, label }) => <option key={value} value={value}>{label}</option>
            )}
          </select>
        </label>
    );
  }