Question

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

state = {
    inputs: [],
    tempInput: {

       inputType: 'Please select a type'

    }
  };

所以我基本上从表单中选择一种类型，它使用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>

这是我选择的方法：

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”原理（请勿重复自己）。
这就是为什么我们使用Array.prototype.map

之类的循环的原因

Answer 2

在onSelect函数中，您要对状态对象（tempInput.inputType = target.value;）进行突变，这不是在React中的好习惯。

如果要让选择值受react状态控制，首先需要将其值与react状态绑定，这被称为受控组件，例如：

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

将选择标签连接到表单，然后在提交时将其重置

2 个答案: