使用输入值使用 useState 添加到数组 - React

Question

我真的很接近实现最终目标。我的目标是添加 X，X 的名称是输入的值。我只是想要一些帮助，说明为什么该功能不起作用（我确定该方法是正确的）。如果您解释一下，我将不胜感激。

函数：

const [activityNames, setName] = useState([
    { id: 1, name: 'Feel free to add, edit and delete!' }
]);
const handleSetName = e => {
    const name = {
        id: Math.random() * 10000,
        name: e.target.value
    };
    let names = activityNames.concat(name)
    setName(names);
};

输入：

<input type="text" placeholder="Aktivitätsname" value={activityNames.name} />
<button onClick={handleSetName}>
    <i className="fas fa-plus"></i>
</button>

Answer 1

您需要正确设置输入字段的值，并正确检索它。

为了设置一个input的值，你还需要有一个change listener——将输入的当前值放入state，然后使用that state value在 handleSetName 而不是 e.target.value 内。（handleSetName里面的目标是按钮，没有值）

const App = () => {
    const [value, setValue] = React.useState('');
    const [activityNames, setName] = React.useState([
        { id: 1, name: 'Feel free to add, edit and delete!' }
    ]);
    const handleSetName = e => {
        const name = {
            id: Math.random() * 10000,
            name: value
        };
        let names = activityNames.concat(name)
        setName(names);
    };
    return (<div>
        <input placeholder="Aktivitätsname" value={value} onChange={e => setValue(e.target.value)} />
        <button onClick={handleSetName}>
            <i className="fas fa-plus"></i>
        </button>
        {JSON.stringify(activityNames)}
    </div>);
};

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

使用输入值使用 useState 添加到数组 - React

adding to an array using useState using the input value - React

events

reactjs

use-state