单击按钮时如何在reactstrap中重置选择和输入组件的值？

如何解决单击按钮时如何在reactstrap中重置选择和输入组件的值？

我有两个组件，它们来自 restraps 库中的 Select 和 输入 。从下拉列表中选择一个项目并指定输入，单击添加按钮以将数据发送到表，但之前的输入在添加后仍保留在字段中。 单击按钮后，如何将字段重置回占位符？ 选择组件看起来像

         <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({},{
      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),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>