javascript - React.js 功能组件中如何将子组件状态传递给父组件状态？

Question

我想将子组件传递state给父组件state，我在类基组件中完成过一次，但在功能组件中，它不再起作用了。

下面是我的模型：

那就是组件

const Search = () => {
    return(
        <div>
            <h1>Search Anything</h1>
            <form>
                <InuptForm />
                <input type="submit">Search</input>
            </form>
        </div>
    );
}

const InuptForm = () => {
    const [search, setSearch] = React.useState('');

    const handleChange = (e) => {
        setSearch(e.target.value);
    }

    return(
        <div>
            <h1>Search Anything</h1>
            <form>
                <input type="text" name="search" value={search} onChange={handleChange} />
            </form>
        </div>
    );
}

或者有没有机会使用useReducer钩子来解决这个问题？

如果有人可以提供帮助，我将不胜感激。

谢谢

标签： javascriptreactjs

Answer 1

你不能在 React 中向上传递状态。它是单向的。如果你想要父母的状态，你需要“提升状态”。这意味着将它放在父组件中

做这样的事情：

const Search = ({ handleChange }) => {
    return(
        <div>
            <h1>Search Anything</h1>
            <form>

                <input type="submit" onChange={handleChange}>Search</input>
            </form>
        </div>
    );
}

const InuptForm = () => {
    const [search, setSearch] = React.useState('');

    const handleChange = (e) => {
        setSearch(e.target.value);
    }

    return(
        <div>
            <Search handleChange={handleChange} />
        </div>
    );
}

我<Search />在<InputForm />这里渲染，然后传递handleChange道具