reactjs - 如何在提交中传递表单变量？ ReactJS

Question

我渲染了以下内容:

<form onSubmit={this.handleCompanySubmit}>
  <label>
    <input placeholder="put company name here" />
  </label>
  <input type="submit" value="Submit" />
</form>

这是事件处理程序:

handleCompanySubmit(event) {
  console.log("company submit")
  event.preventDefault(); 
  this.setState({company: event.target.value })
}

以下内容位于构造函数中:

this.handleCompanySubmit = this.handleCompanySubmit.bind(this);

我不知道为什么它不起作用。 value 事件没有被传递，我不确定为什么。

谢谢。

Answer 1

提交事件的target的value将不是表单内输入的值。

你可以例如将输入值保留在company状态变量中，并在提交表单时使用它。

示例

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

  onChange = e => {
    this.setState({ company: e.target.value });
  };

  handleCompanySubmit = event => {
    event.preventDefault();
    console.log(this.state.company);
  };

  render() {
    return (
      <form onSubmit={this.handleCompanySubmit}>
        <label>
          <input
            placeholder="put company name here"
            value={this.state.company}
            onChange={this.onChange}
          />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

ReactDOM.render(<App />, 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>