[英]How to reset value of Select and Input component in reactstrap on button click?
我有来自reactstrap库的两个组件Select和Input 。 从下拉列表中选择一个项目并给出输入,单击添加按钮将数据发送到表格,但先前的输入在添加后保留在字段中。 单击按钮后,如何将字段重置回占位符? 选择组件看起来像
<Select
name="Item"
closeMenuOnSelect={true}
components={animatedComponents}
placeholder="Select Item"
options={this.props.itemsOptions}
onChange={(data) => this.handleOnDropDownSelect(data, "addItem")}
/>
和输入字段:
<Input
type="number"
min={0}
placeholder="QTY"
onChange={(e) => this.handleOnDropDownSelect(e, "quantity")}
className="item-add-qty"
/>
下面是handleOnDropDownSelect()函数的一部分
else if (key === "addItem") {
this.setState({
itemToAdd: Object.assign({}, this.state.itemToAdd, { id: data.value }),
});
} else if (key === "quantity") {
this.setState({
itemToAdd: Object.assign({}, this.state.itemToAdd, {
quantity: parseInt(data.target.value),
}),
});
您可以使用状态/参考来控制选择和输入的值(取决于您的要求)。
const [dropDown, setDropdown] = useState("");
const [input, setInput] = useState("");
<Select ...options value={dropDown} />
<Input ...options value={input} />
在你的handleOnDropDownSelect里面:
const handleOnDropDownSelect = (val) => {
setDropdown(val);
}
单击按钮时,清空状态值:
const handleButtonClick = () => {
setDropdown("");
setInput("");
}
单击添加按钮后,您将清除输入并选择标记元素状态以重置字段。
this.setState(state => ({
inputText: '',
dropdown: ''
}));
就像上面的代码一样,将 input(inputText) 和 select(dropdown) 状态值设置为''
。
检查演示:
class TodoApp extends React.Component { constructor(props) { super(props); this.state = { items: [], inputText: '', Item: '' }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } render() { return ( <div > <h3 > TODO < /h3> < TodoList items = { this.state.items } /> <form onSubmit = { this.handleSubmit } > <label htmlFor = "new-todo" > </label> < input name = "inputText" id = "new-todo" onChange = { this.handleChange } value = {this.state.inputText}/> <button > Add </button> < select name = "dropdown" onChange = {this.handleChange} value = {this.state.dropdown} > <option value = "" > please select < /option> <option value = "A" > Apple < /option> <option value = "B" > Banana < /option> <option value = "C" > Cranberry < /option> </select> </form> </div> ); } handleChange(e) { this.setState({ [e.target.name]: e.target.value }); } handleSubmit(e) { e.preventDefault(); console.log(this.state.inputText, this.state.dropdown); let text = this.state.inputText + " " + this.state.dropdown; const newItem = { text: text, }; this.setState(state => ({ items: state.items.concat(newItem), inputText: '', dropdown: '' })); } } class TodoList extends React.Component { render() { return ( <ul > { this.props.items.map(item => ( <li > {item.text} < /li>)) } </ul> ); } } ReactDOM.render( < TodoApp / > , document.getElementById('root') );
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.