обновление не захватывает и не может обновить поле ввода - PullRequest
0 голосов
/ 03 апреля 2020

пожалуйста, найдите ниже код, который содержит идентификатор имени и я рендеринг изначально с использованием карты

заменяю значение идентификатора на тип ввода в пользовательском интерфейсе

с обновленным типом ввода пытаюсь обновить значение onchange

обновление не захватывает и не может обновить поле ввода

есть предложения?

см. Ниже фрагмент

import React, { useState } from "react";

const CstmInput = (props) => {
  return (
    <input
      name={props.name}
      type="text"
      value={props.value}
      onChange={(event) => props.onInputChange(event)}
    />
  );
};

export default CstmInput;

import React, { useState } from "react";
import CstmInput from "./CstmInput";

const HierarcyTest = () => {
  let rowData = [
    { name: "first", id: 10 },
    { name: "second", id: 20 },
  ];
  const [data, setData] = useState(rowData);
  const [name, setName] = useState({ fn: "test" });

  const onInputChange = (e) => {
    console.log("---event---", e.target.value);
    setName({ ...name, fn: e.target.value });
  };

 let updateValue = () => {
    let newData = data.map(
      (item, index) =>
        (item.id = (
          <CstmInput name={item.name} value={item.id} onInputChange={(e) => onInputChange(e)} />
        ))
    );
    setData([...data, newData]);
  };
  return (
    <div>
      <div>Testing</div>
      {data.map((val) => (
        <h6>
          {" "}
          {val.name} {val.id}
        </h6>
      ))}
      <button onClick={updateValue}> Click </button>
    </div>
  );
};

export default HierarcyTest;


1 Ответ

0 голосов
/ 03 апреля 2020

Несколько причин, по которым ваш код не работает должным образом:

1.

  let updateValue = () => {
    let newData = data.map((item, index) => {
      if (item.id === 10) {
        return [
          (item.id = (
            <CstmInput
              value={item.id}
              onInputChange={(e) => onInputChange(e)}
            />
          )),
        ];
      }
    });
    setData([...data, newData]);
  };

В приведенной выше функции внутри функции обратного вызова map вы возвращаетесь только тогда, когда условие удовлетворяется. Вы пытаетесь filter массив вместо? Если нет, то вернуть что-то, если условие if не выполнено.

И почему вы возвращаете массив?

return [
  (item.id = (
    <CstmInput
      value={item.id}
      onInputChange={(e) => onInputChange(e)}
    />
  )),
];

приведенный выше код выглядит логически неправильным.

2.

  const onInputChange = (e) => {
    console.log("---event---", e.target.value);
    setName({ ...name, fn: e.target.value });
  };

Если вы хотите обновить состояние, которое зависит от предыдущего затем укажите, как вы это делаете:

setName((prevState) => ({ ...prevState, fn: e.target.value }));

, но поскольку вы на самом деле не полагаетесь на свойства предыдущего состояния, вы можете просто использовать:

setName({fn: e.target.value });

Обратите внимание, что с ваше состояние имеет только одно свойство, и вы хотите обновить это единственное свойство, которое вы можете полностью перезаписать, вам не нужно распространять предыдущее состояние.

update измените функцию updateValue как следующее:

let updateValue = () => {
  setData(prevData => {
    return prevData.map(el => {
      return { ...el, id: <CstmInput value={el.id} onInputChange={(e) => onInputChange(e)} /> };
    })
  });
};

A Пример стекаблита Я создал, который реализует то, что вы пытаетесь сделать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...