在我的react应用程序中,我希望将输入更改为表单中的select标记,我该怎么做?
<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>
答案 0 :(得分:2)
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" />