Question

提交后，我的表格未重置。怎么了？？我试图在提交后将状态属性设置为null。但是输入值未设置为null。我的代码没有错，请帮助我解决此问题。

   class AddNinja extends Component {
      state = {
          id: null, name: null, age: null, belt: null
       };

  handleChange = e => {
    this.setState({[e.target.id]: e.target.value });
 };

 handleSubmit = e => {
   e.preventDefault();
   this.props.addNijna(this.state);
   this.setState({id: null, name: null, age: null, belt: null });
 };

render() {
  return (
   <div>
    <h4>Add Ninja</h4>
    <form onSubmit={this.handleSubmit}>
      <label htmlFor="name">id : </label>
      <input type="text" id="id" onChange={this.handleChange} />
      <label htmlFor="name">Name : </label>
      <input type="text" id="name" onChange={this.handleChange} />
      <label htmlFor="age">Age : </label>
      <input type="text" id="age" onChange={this.handleChange} />
      <label htmlFor="belt">Belt : </label>
      <input type="text" id="belt" onChange={this.handleChange} />
      <button type="submit" className="btn btn-secondary btn-sm m-2">
        Submit
      </button>
    </form>
  </div>
   );
  }
 }

 export default AddNinja;

Answer 1

您需要控制您的输入，这意味着它们会从state和onChange获取其值，因为状态已更改，它反映在您的组件中。还要将值设置为空字符串而不是null，以避免在运行时从不受控制的组件切换到受控制的组件。

您可以在此处了解有关受控输入的更多信息：https://reactjs.org/docs/forms.html

对于您的代码，您需要做的是：

 class AddNinja extends Component {
      state = {
          id: null, name: null, age: null, belt: null
       };

  handleChange = e => {
    this.setState({[e.target.id]: e.target.value });
 };

 handleSubmit = e => {
   e.preventDefault();
   this.props.addNijna(this.state);
   this.setState({id: null, name: null, age: null, belt: null });
 };

render() {
  const {id, name, age, belt} = this.state;
  return (
   <div>
    <h4>Add Ninja</h4>
    <form onSubmit={this.handleSubmit}>
      <label htmlFor="name">id : </label>
      <input value={id} type="text" id="id" onChange={this.handleChange} />
      <label htmlFor="name">Name : </label>
      <input value={name} type="text" id="name" onChange={this.handleChange} />
      <label htmlFor="age">Age : </label>
      <input value={age} type="text" id="age" onChange={this.handleChange} />
      <label htmlFor="belt">Belt : </label>
      <input value={belt} type="text" id="belt" onChange={this.handleChange} />
      <button type="submit" className="btn btn-secondary btn-sm m-2">
        Submit
      </button>
    </form>
  </div>
   );
  }
 }

 export default AddNinja;

提交后未重置表单-react js

1 个答案: