Как добавить элемент в форму по клику в React?

Question

[Антон Измайлов]

Дело обстоит следующим образом: голова закипает, а работы еще море.
В процессе изучения React встал вопрос:
Имеется форма
"Имя Телефон"
Как при клике на что-либо добавлять в эту форму еще один инпут "Количество товара N" допустим, а при повторном удалять ее из формы?
display: none не вариант, так как вся эта каша передастся далее обработчику, т.е. нужно генерировать, а как что-то не пойму, а в документации не вижу т.к. уже все плывет.

Answer 1

[Никита Гущин]

Я набросал пример - jsfiddle.net/yuvuyrhv/19

class MyForm extends React.Component {

  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.addGood = this.addGood.bind(this);
    this.changeGoodCount = this.changeGoodCount.bind(this);
    this.state = { goods: [] };
  }

  handleSubmit() {
    console.log('handleSubmit');
  }

  addGood() {
    const { goods } = this.state;
    this.setState({ goods: [ ...goods, { count: 0 } ] });
  }

  changeGoodCount(n, count) {
    const { goods } = this.state;
    this.setState({ goods: goods.map( (good, i) => i === n ? { count } : good ) });
  }

  render() {
    const { goods } = this.state;
    const { handleSubmit, addGood, changeGoodCount } = this;
    console.log('MyForm.render() -> goods =', goods);
    return (
      <form onSubmit={handleSubmit}>
      	<div>
          Имя пользователя: <input type="text" />
        </div>
        <div>
          Телефон: <input type="text" />
        </div>
        <div>
          { goods.map( (good, i) => <GoodInput key={i} good={good} n={i} onChange={changeGoodCount}/> ) }
        </div>
        <div>
          <button type="button" onClick={addGood}>Добавить что-либо</button>
        </div>
      </form>
    );
  }
}

class GoodInput extends React.Component {
  handleChange(e) {
    const { n, onChange } = this.props;
    const count = e.currentTarget.value;
    onChange(n, count);
  }

  render() {
    const { good, n } = this.props;
    return ( 
      <div>
        Количество товара {n} <input type="text" onChange={(e) => this.handleChange(e)} />
      </div>
    );
  }
}

Идея, надеюсь, ясна. В итоге подключите к вашим сторам все это, уберете стейт, добавить проп тайпс, добавите обработчики onChange на все инпуты и так далее...

Comments

[Антон Измайлов]

Огромное спасибо, как же не догадался до стэйтов дурная голова.

[Никита Гущин]

Антон Измайлов: Не за что. Но стейт - это так, для примера. В идеале все должно хранится у вас в store ... в зависимости от того, какой flux вы используете