Question

我正在编写我的第一个React应用程序，并且确实在努力做一些基本的事情。

我有一个输入组件，该组件的状态为数组，当它有两个数字时，它会将它们和一个唯一的ID作为对象发送给父组件，该父组件将对象存储在数组中。

这很好，我可以做到。问题是事后清除输入。

据我所知，当执行on Change时，我需要将输入的值存储在Component状态（在数组中）中。然后，这些值将用于提交表单。

但是，如果输入从状态中获取值，则它们需要在渲染中具有一个值，我不希望这样做。我只希望它们在输入后输入后才有值。我已经尝试过使用setState在提交后使用空数组替换inputTable，但这仍然没有更改值。

这是代码-重申一下，我想找到一种方法，在提交数组后才清除输入。目前，我一直在说我正在将一个不受控制的组件变成一个受控制的组件，据我所知，但我不明白我的意思是

请相信我已经尝试过自己解决此问题，签出了有关表单和输入的MDN文档，但我确实一无所获。非常感谢您的帮助。

import React, { Component } from 'react';

class Input extends Component {
  constructor(props) {
    super(props)
    this.state = {
      inputTable: [],
      uniqueId: 1
    }
    this.handleChange = this.handleChange.bind(this);
    this.sendTables = this.sendTables.bind(this);
  }

  async handleChange(e) {
    e.preventDefault();
    await this.setState({
      inputTable: [
        ...this.state.inputTable, e.target.value
      ]
    })
    console.log(this.state.inputTable)
    // how do I handle this onChange correctly?
  }

  async sendTables(e) {
    e.preventDefault();
    this.props.submitTable(this.state.inputTable, this.state.uniqueId);
    let newArray = [];
    await this.setState({
      inputTable: newArray,
      uniqueId: this.state.uniqueId + 1
    })
    console.log(this.state.inputTable)
    // how can I clear the inputs?
  }

  render() {
    return (
      <div className="Input">
        <form action="" onSubmit={this.sendTables}>
          <input required type="number" name="value0" placeholder="a number..." onChange={this.handleChange} value={this.state.inputTable[0]} />
          <span>X</span>
          <input required type="number" name="value1" placeholder="multiplied by..." onChange={this.handleChange} value={this.state.inputTable[1]}/>
          <input type="submit" value="Add times table" />
        </form>
      </div>
    );
  }
}

export default Input;

父组件：

import React, { Component } from 'react';
import Input from './Input/Input';

class InputTimesTables extends Component {
  constructor() {
    super();
    this.state = {
      tables: [],
      noInputs: 1
    }
    this.pushToTables = this.pushToTables.bind(this);
  }

  addInput() {
    // this will be used to add an additional input
    // it will increment no. inputs
  }

  async pushToTables(arr, id) {
    let newTimesTable = {
      timesTable: arr,
      uniqueId: id
    }

    await this.setState({
      tables: [...this.state.tables, newTimesTable]
    })
    // console.log(`The ITT state looks like:`, this.state.tables);
    //this will take the two numbers in the array from the Input 
    // and push them to the tables array
    // it won't run unless there are two numbers in that array
    console.log('The main state array now looks like this: ', this.state.tables)
  }

  // clearTables(id){
  //   console.log(`splicing array no ${id}`);
  //   let newArray = this.state.tables;
  //   newArray.splice(id, 1);
  //   this.setState({
  //     tables: newArray
  //   })
  //   console.log(this.state.tables);
  //   // console.log(`The ITT state looks like:`, this.state.tables);
  // }

  render() {
    return (
      <div>                
        <Input submitTable={this.pushToTables}/>
        <h3>Currently being tested on:</h3>
        <ul>
        </ul>
      </div>
    );
  }
}

export default InputTimesTables;

非常感谢。

Answer 1

我想我已经明白了-问题是数字输入实际上不是数字-它是一个字符串。因此，我可以将数组设置为[“”，“”]，然后将它们重置，就没有问题了。我希望这对其他人有帮助。

感谢您的光临！

更改状态，然后清除输入React

1 个答案: