使用 select 获取输入

Question

在我的反应应用程序中，我希望将输入更改为表单中的选择标签，我该怎么做？

<form className="form-maker" onSubmit={this.handleSubmit}>
   Type:
  <input name="inputType" type="text" onChange={this.handleChange} />
</form>

到这里：

<select>
  <option value="text">text</option>
  <option value="color">color</option>
  <option value="date">date</option>
  <option value="email">email</option>
  <option value="tel">tel</option>
  <option value="number">number</option>
</select>

Answer 1

handleChange 位于<select /> 元素中，类似于<input />。

这是一个运行中的小例子：

class App extends React.Component {
  state = { value: "text" };

  onSelect = ({target}) => this.setState({value: target.value})

  render() {
    const { value } = this.state;
    return (
      <div>
        <select onChange={this.onSelect}>
          <option value="text">text</option>
          <option value="color">color</option>
          <option value="date">date</option>
          <option value="email">email</option>
          <option value="tel">tel</option>
          <option value="number">number</option>
        </select>
        <div>{`Selectet Value is ${value}`}</div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"/>

您可能需要这些值的数组，因此渲染<options /> 和设置selected 属性会更容易。

这是另一个示例，这次选择了不同的默认值：

const values = [
  "text", "color", "date", "email", "tel","number"
]

class App extends React.Component {
  state = { value: "date" };

  onSelect = ({target}) => this.setState({value: target.value})

  render() {
    const { value } = this.state;
    return (
      <div>
        <select onChange={this.onSelect}>
          {values.map(val => <option key={val} value={val} selected={val === value}>{val}</option>)}
        </select>
        <div>{`Selectet Value is ${value}`}</div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root" />