将 select 标签连接到表单，然后在提交时重置它

Question

大家好，我正在尝试在使用 React 提交后重置 select 标签，我将第一个选项连接到状态：

state = {
    inputs: [],
    tempInput: {

       inputType: 'Please select a type'

    }
  };

所以我基本上 select 我的表单中的一个类型，它用 inputType 更新 tempInput 对象，然后将它添加到对象数组中，

 <div className="formG">
            <form className="form-maker" onSubmit={this.handleSubmit}>
               <select onChange={this.onSelect}>
                <option>{this.state.tempInput.inputType}</option>
                <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>

              <button>Submit</button>
            </form>

这是我的 select 方法：

onSelect = ({ target }) => {
    const { tempInput } = this.state;
    tempInput.inputType = target.value;
    this.setState({ tempInput });

  };


handleSubmit = e => {
    e.preventDefault();
how to do that in handleSubmit? to put the tempInput.inputType to ="Please pick a type"
  };

Answer 1

这是一个uncontrolled element。如果你想控制 input / select 的值，你需要通过你的状态来设置它：

const values = [
  "text", "color", "date", "email", "tel","number"
]

class App extends React.Component {
  state = { value: "" };

  onSelect = ({target}) => this.setState({value: target.value})

  handleSubmit = () => {
    console.log('submit with ',this.state.value)
    this.setState({value: ''})
  }

  render() {
    const { value } = this.state;
    return (
      <div>
        <select onChange={this.onSelect}>
          <option>Select A value</option>
          {values.map(val => <option key={val} value={val} selected={val === value}>{val}</option>)}
        </select>
        <button onClick={this.handleSubmit}>Submit</button>
        <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" />

这里是没有数组的例子：

class App extends React.Component {
  state = { value: "" };

  onSelect = ({ target }) => this.setState({ value: target.value })

  handleSubmit = () => {
    console.log('submit with ', this.state.value)
    this.setState({ value: '' })
  }

  render() {
    const { value } = this.state;
    return (
      <div>
        <select onChange={this.onSelect}>
          <option selected={value === ""} value="">Select A value</option>
          <option selected={value === "text"} value="text">text</option>
          <option selected={value === "color"} value="color">color</option>
          <option selected={value === "date"} value="date">date</option>
          <option selected={value === "email"} value="email">email</option>
          <option selected={value === "tel"} value="tel">tel</option>
          <option selected={value === "number"} value="number">number</option>
        </select>
        <button onClick={this.handleSubmit}>Submit</button>
        <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"/>

当然这里有很多重复的代码，在编程中有"DRY"原则（Do Not Repeat Yourself）。
这就是为什么我们使用像 Array.prototype.map

这样的循环

Answer 2

在你的 onSelect 函数中，你改变了状态对象（tempInput.inputType = target.value;），这不是反应的好习惯。

如果你想让你的 select 值由反应状态控制，首先你需要将它的值与反应状态绑定，它被称为受控组件，如：

<select onChange={this.onSelect} value={this.state.tempInput.inputType}>

将 select 标签连接到表单，然后在提交时重置它

connecting a select tag to a form, and then reseting it at submit

select

submit

reactjs