使用选择获取输入

Question

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

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