时间戳

首页 > 解决方案 > 如何在 ReactJS 中使用默认值编辑输入

reactjs - 如何在 ReactJS 中使用默认值编辑输入

问题描述

value那么，除了defaultValue手动更改输入值之外，还有其他方法吗？（使用 defaultValue 时我的程序无法正常工作）

ChildComponent = React.memo(
  ({ name, index, onChange, onDelete
  }) => {
    return (
      <div>
        <input value={name} onChange={onChange(index, name)} />
        <button onClick = {() => onDelete(index)}>delete</button>
      </div>
    );
  }
);
 function App() {
  const [names, setNames] = React.useState(["First", "Second"]);
  const newName = React.useRef();

  const onNameChange = (index: number, newName: string) => (event: {
    target: { value: string };
  }) => {
    names[index] = event.target.value;
    setNames(names);
  };
  function onNameDelete(index: number) {
    const nameArr = [...names];
    nameArr.splice(index, 1);
    setNames(nameArr);
  }
  return (
    <div>
      {names.map((name, index) => (
        <ChildComponent
          key={index}
          name={name}
          index={index}
          onChange={onNameChange}
          onDelete={onNameDelete}
        />
      ))}
    </div>
  );
}

标签： reactjsreact-native

解决方案

问题出在您的onChange输入处理程序中ChildComponent。您根本没有使用用户传递的值来输入。您需要以类似于您的onDelete处理程序的方式编写它（使用新值，在存储在我的代码段中event.target.value）：

ChildComponent = React.memo(
  ({ name, index, onChange, onDelete
  }) => {
    return (
      <div>
        <input value={name} onChange={(event) => onChange(index, event.target.value)} />
        <button onClick = {() => onDelete(index)}>delete</button>
      </div>
    );
  }
);

还要查看Html 文档中输入更改处理程序的定义。

编辑：另一个问题是您的父控制器中的处理程序：

 const onNameChange = (index: number, newName: string) => (event: {
    target: { value: string };
  }) => {
    names[index] = event.target.value; //this is BAD, do not change your state value directly, moreover, the event is undefined here
    setNames(names);
  };

您需要不可变地更新数组中的项目（来源更新数组中的项目）：

const onNameChange = (index: number, newName: string) => (event: {
  target: { value: string };
}) => {
  const newNames = names.map((item, itemIndex) => {
    if (itemIndex !== index) {
      // This isn't the item we care about - keep it as-is
      return item
    }

    // Otherwise, this is the one we want - return an updated value
    return newName;
  });
  setNames(newNames);
};

推荐阅读