Question

当我点击添加按钮时，它应该添加一个输入，我必须保存它。

类似于this但有输入的东西。但问题是输入是不同的，所以我不知道该怎么做

我的代码：

class Main extends Component {
  constructor(props) {
    super(props);
    this.handleChangeCategorie = this.handleChangeCategorie.bind(this);
    this.state = {
      // I think it should be an array but I don't know
      valueCategorie: ""
    };
  }
  addCategorie(){
    //Something to add input 
  }
  handleSubmit() {
    //Make something with the categorie
  }

  handleChangeCategorie(e) {
    // I don't know if I can use this function for all Input
    this.setState({ valueCategorie: e.target.value });
  }
  render() {
    return <div className="container">              
        <input type="text" value={this.state.valueCategorie} onChange={this.handleChangeCategorie} />
        <Button onClick={this.addCategorie}>Add Input</Button>
        <Button onClick={this.handleSubmit}>Send</Button>
      </div>;
  }
}

我不认为它是同一个问题here，因为他使用了一些东西来计算。也许还有另外一种方法呢？或者这是唯一的方法？

Answer 1

假设你有一系列不同的输入，

let inputArray = [<input id="1"/>,<input id="2"/>,<input id="3"/>]

宣布国家，状态= { inputsRenderingArray：[] }

动态添加输入的功能

AddFirst=()=>this.setState({inputsRenderingArray:[...this.state.inputsRenderingArray, inputArray[0]]})

AddSecond=()=>this.setState({inputsRenderingArray:[...this.state.inputsRenderingArray, inputArray[1]]})

AddThird=()=>this.setState({inputsRenderingArray:[...this.state.inputsRenderingArray, inputArray[2]]})

在渲染中，单击“添加”按钮将这些项目推入可渲染数组，渲染（）{

return(
   <Button onClick={AddFirst}>Add First</Button>
   <Button onClick={AddSecond}>Add Second</Button>
   <Button onClick={AddSecond}>Add Second</Button>

   {this.state.inputsRenderingArray}
)

}

在React中添加带有添加按钮的输入

1 个答案: