React defaultValue 导致过滤函数的行为与预期不同

Question

我有一个可编辑输入的列表，但是当我过滤掉 useState 数组中的一项时，它仅在我使用 value 属性，这是不可编辑的，而不是 defaultValue 属性，这会导致删除数组的最后一项（而不是单击的那一项）。

有没有办法在保持输入可编辑的同时删除右边？

这是一个示例 Fiddle: https://jsfiddle.net/MatanCL/25hLyj6a/1

我的代码：

function App () {
  let [myAray1, setMyArray1] = React.useState(['cat', 'dog', 'fish']);
  let [myAray2, setMyArray2] = React.useState(['cat', 'dog', 'fish']);
  return (
    <div>

        Working, but input is uneditable:

        {myAray1.map(animal => <div>
            <input value={animal}/>
            <button onClick={() => {
                const me = animal;
                setMyArray1(myAray = myAray1.filter(animal => animal !== me));
            }}>
                remove
            </button>
        </div>)}

        <br/>

        Removes the wrong one:

        {myAray2.map(animal => <div>
            <input defaultValue={animal}/>
            <button onClick={() => {
                const me = animal;
                setMyArray2(myAray2 = myAray2.filter(animal => animal !== me));
            }}>
                remove
            </button>
        </div>)}
    </div>
  )
}

谢谢大家！

Answer 1

您应该将 key 添加到您的输入中。喜欢：

{myAray2.map(animal =>
   <div>
     <input defaultValue={animal} key={animal} />
     ...
   </div>)
}

这样做的原因是为了显式地告诉 React 键。更多信息请阅读the official document。

Answer 2

<input> 不可编辑，因为设置值属性使其成为 受控组件

您需要向输入添加 onChange 事件以使其可编辑。

为确保您在使用过滤器时没有删除错误的元素，请使用“Key”来过滤正确的项目。

删除错误的：

       {myAray2.map(animal => <div>
            <input value={animal} key={animal} onChange={handleOnChange}/>
            <button onClick={() => {
                const me = animal;
                setMyArray2(myAray = myAray2.filter(animal => animal !== me));
            }}>
                remove
            </button>
            <div />)}

React defaultValue 导致过滤函数的行为与预期不同

React defaultValue is causing the filtering function act different than expected

arrays

state

jsx

reactjs

use-state