получать вход с помощью выбора

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" />