Блог

Главная - Вопросы по программированию - Как я могу добавить или удалить поля ввода в react

Как я могу добавить или удалить поля ввода в react

#reactjs

Вопрос:

Я пытаюсь создать функцию кнопки, которая может добавлять или удалять поля ввода, а не дублировать их, как это:

   <ul>
    <li>
      <input
        type="text"
        name="rule_one"
        placeholder="Rule 1"
        defaultValue={rule_one}
        onChange={handleChange}
      />
    </li>
    <li>
      <input
        placeholder="Rule 2"
        type="text"
        name="rule_second"
        defaultValue={rule_second}
        onChange={handleChange}
      />
    </li>
    <li>
      <input
        placeholder="Rule 3"
        type="text"
        name="rule_third"
        defaultValue={rule_third}
        onChange={handleChange}
      />
    </li>
  </ul>
  <div className="team-agreement-add-rule">
    <button type="submit" onClick={handleSubmit}>
      <Save />
    </button>
  </div>

Как я могу выполнить эту функцию ?

Ответ №1:

Одним из способов может быть инициализация состояния в виде пустого массива,

 const [inputs, setInputs] = useState([]);

каждый раз при нажатии на кнопку в массив может быть добавлен объект:

 <button onClick={() => addInputs()}>Add input</button>
 
 const addInputs = () => {
  setInputs([...inputs, { name: `rule-${inputs.length   1}` }]);
};

Чтобы отрисовать его, вам нужно будет сопоставить массив входных данных, как это:

 {inputs.map((input) => (
  <div>
    <label>{input.name}</label>
    <input name={input.name} style={{ margin: "10px" }} />
  </div>
))}

Я поделюсь с вами примером кода в codesandbox: https://codesandbox.io/s/dynamic-inputs-0k46q?file=/src/App.js

Комментарии:

1. Быстрый вопрос: в моем бэкэнде nodejs я могу написать это так ??? const rules = []; for (let i = 0; i <= 4; i ) { rules.push([req.body.rule_ ${i} ]); }

2. Было бы лучше, если бы вы избежали этого цикла for в своем бэкэнде, как насчет того, чтобы просто отправить массив с информацией о вашем правиле?

3. И как я могу отобразить правило, которое уже существует на моем веб-сайте? Или мне просто нужно каждый раз нажимать «Добавить»?

4. Я бы отправил весь массив на серверную часть и сохранил его

5. Да. Но как я могу сделать так, чтобы входные данные отображались, когда у нас уже есть данные для этого ?

Метки: