Блог

Главная - Вопросы по программированию - ReactJS — Как я могу создать несколько полей формы со свойствами значений, имеющими одинаковые имена, но не одинаковые значения?

ReactJS — Как я могу создать несколько полей формы со свойствами значений, имеющими одинаковые имена, но не одинаковые значения?

#javascript #reactjs #jsx

Вопрос:

После 2 дней ожесточенной борьбы я решил впервые опубликовать сообщение о переполнении стека :).

Меня беспокоит следующее:

В рамках проекта я хочу сгенерировать количество полей ввода, равное размеру массива. Пример :

 function App() {
  const [UseState, setUseState] = useState("");
  const array = [0, 1, 2];

  const HandleAdding = (e) => {
    e.preventDefau<
    const returnJson = { UseState };
    //rest of the code
  };

  return (
    <div>
      {array.map(() => (
        <form onSubmit={HandleAdding}>
          <input value={UseState} onChange={(e) => setUseState(e.target.value)} />
        </form>
      ))}
    </div>
  );
}

Мы уже можем знать проблему, когда при вставке значения в поле это же значение будет вставлено во все другие поля, которые имеют то же состояние использования, что и значение.
Для еще более конкретного, вот иллюстрация проблемы в CodeSandbox:

https://codesandbox.io/s/adoring-rgb-n0bdk?file=/src/App.js

Поэтому попробуйте заполнить поле, и вы заметите проблему. Я много чего перепробовал, чтобы решить свою проблему вот так:

https://codesandbox.io/s/blissful-rain-mcol2?file=/src/App.js (Я пытаюсь адаптировать код, чтобы решить свою проблему).

Я больше ничего не ставлю, чтобы он не стал слишком длинным. Итак, у вас есть решение для решения этой проблемы? Со своей стороны, у меня мало идей, и я все еще новичок в React. Заранее спасибо! ^^

Ответ №1:

 function App() {
  const [UseState, setUseState] = useState({});
  const array = [0, 1, 2];
  const size = array.length;

  const HandleAdding = (e) => {
    e.preventDefau<
    const returnJson = { UseState };
    //rest of the code
  };

  return (
    <div>
      {array.map((x) => (
        <form onSubmit={HandleAdding}>
          <input value={UseState[x]} onChange={(e) => setUseState({...UseState, [x]: e.target.value})} />
        </form>
      ))}
    </div>
  );
}

Вы можете легко решить эту проблему, изменив структуру UseState , чтобы стать объектом с приведенным ниже шаблоном

 UseState = {
  0: 'Isaac',
  1: 'James',
  2: 'John'
}

Вам необходимо хранить несколько значений, поэтому при извлечении значения, использовании UseState[x] и обновлении вам необходимо распространить объект и обновить значение определенного свойства

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

1. Большое вам спасибо. Я постараюсь это реализовать.

Ответ №2:

  1. Как правило, для форм вы сохраняете значения входных данных в одном объекте в состоянии, а затем обновляете это состояние новыми значениями, когда входные данные были изменены.
  2. В данный момент вы создаете больше форм, чем вам нужно. Вам даже не нужен form элемент, потому input что элементы на самом деле этого не требуют.
  3. Инициализируйте свое состояние с помощью объекта.
  4. map по массиву, а не по длине массива.
  5. Назовите свои входные данные, чтобы при изменении значений вы могли легко обновить состояние.
 const { useState } = React;

function Example() {

  // Initialise state with an object
  const [ data, setData ] = useState({});

  // Example input names
  const arr = ['name', 'address', 'number'];

  // When the input changes, get the name
  // and the value, and update the state using
  // that information
  function handleChange(e) {
    const { name, value } = e.target;
    setData({ ...data, [name]: value });
  }

  function handleSubmit() {
    console.log(data);
  }

  function createInputs(arr) {

    // `map` over the array and return some JSX
    return arr.map(el => {
      return (
        <label>{el.toUpperCase()}:amp;nbsp;
          <input type="text" name={el} />
        </label>
      );
    });
  }

  return (
    <div onChange={handleChange}>
      {createInputs(arr)}
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
};

// Render it
ReactDOM.render(
  <Example />,
  document.getElementById("react")
); 
 label { display: block; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

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

1. Привет, я посмотрел на ваше решение, и оно на самом деле не решает мою проблему. Что касается содержания моей темы, я был максимально ясен, но, думаю, не за название, извините. Фактически, на каждом витке цикла (например, 3 витка циклов при обходе массива) создаются поля формы, но внезапно эти поля будут иметь те же значения, что и поля других циклов. Этот кодовый блок очень хорошо иллюстрирует проблему: codesandbox.io/s/adoring-rgb-n0bdk?file=/src/App.js Я сделаю все возможное, чтобы адаптировать ваше решение к моей проблеме, чтобы решить ее и опубликовать здесь.

Метки: , ,