Добавить вход с кнопкой добавления в React - PullRequest
Новая
       7

Добавить вход с кнопкой добавления в React

0 голосов
/ 29 мая 2018

Когда я нажимаю на кнопку добавления, он должен добавить вход, и я должен сохранить его.

Что-то вроде это , но с вводом.Но проблема в том, что входные данные различны, поэтому я не знаю, как это сделать

Мой код: 

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>;
  }
}

Не думаю, что это один и тот же вопрос здесь потому что он использует что-то для подсчета.Может быть, есть другой путь к этому?Или это единственный способ?

1 Ответ

0 голосов
/ 29 мая 2018

Скажем, у вас есть массив ваших различных входов, 

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

Объявление состояния, состояние = {inputRenderingArray: []}

Функции для динамического добавления ввода, 

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]]})

при рендеринге, при нажатии на кнопку добавления эти элементы помещаются в массив для рендеринга, render () {

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

   {this.state.inputsRenderingArray}
)

}
...