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挂钩来解决此问题？

如果有人能提供帮助，我将非常感谢。

谢谢

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道具

Answer 2

状态不能从子组件传递到父组件，而是可以在父组件中创建状态，然后将其作为prop传递给子组件，这样子组件中的change函数将更新父组件中的状态。

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

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

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

const InuptForm = ({value, handler}) => {

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

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

2 个答案: