React defaultValue 导致过滤功能的行为与预期不同

Posted 2023-02-22

【中文标题】React defaultValue 导致过滤功能的行为与预期不同

【英文标题】：React defaultValue is causing the filtering function act different than expected

【发布时间】：2021-09-25 05:32:57

【问题描述】：

我有一个可编辑输入的列表，但是当我过滤掉 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>
  )

谢谢大家！

【参考方案1】：

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

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

这样做的原因是明确地告诉 React 的键。更多信息请阅读the official document。

【参考方案2】：

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

您需要将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 />)