javascript - 如何在父组件中使用子组件的状态？

Question

我需要使用父组件中子组件内的状态值。

组件:

export default function Children(props) {

    const [data,setData] = useState('')

     const handleChange = (e) =>{
        e.preventDefault();
        setData({[e.target.name]:e.target.value});

     }
    return(
        <Component onChange={handleChange} name={props.name} label={props.name} variant="outlined" />
    );
};

这是父组件:

export default function Parent(){

    return(
        <div>
        <TextArea name="One"/>
        <TextArea name="Two"/>
        <TextArea name="Three"/>
        </div>
);}

Answer 1

您只能在父组件中拥有 state 和 onChange 处理程序。

export default function Splitter(){
    const [data,setData] = useState('')

    const handleChange = (name, value) =>{
        setData({[name]:value});
     }
    return(
        <div>
        <TextArea name="Nome" handleChange={handleChange}/> //Pass the change handler here
        <TextArea name="Test" handleChange={handleChange}/>
        <TextArea name="Local" handleChange={handleChange}/>
        </div>
);}

在子组件中调用父组件的函数，

export default function TextArea(props) {

     const handleChange = (e) =>{
        props.handleChange(e.target.name, e.target.value)
     }

    return(
        <CssTextArea onChange={handleChange} name={props.name} label={props.name} variant="outlined" />
    );
};