将值从子组件传递给父组件

IT技术 reactjs
2021-03-30 15:15:17

我有两个组成部分：

  • 第一个是父组件，它是一个常见的 React 组件。
  • 第二个是孩子，它是一个功能组件。

我想将Titles的值（在子状态）传递给父组件。这是我的子组件代码：

        export default function ChildApp(props) {

        const  [titles,setTitles] = React.useState("")

          return (

           <Button title="submit" onPress={()=>setTitles("asma")}/>

               );
             }

这是我的父组件：


       this.state = { titles:"foo"} 
       setTitles = titles => this.setState({ titles })

       // i need the value of Titles to be set in state 
        export default class ParentApp extends Component {
       const titles = this.state.titles
           <ChildApp titles={titles} setTitles={this.setTitles} />
         }

这似乎很容易做到，但对我来说这是第一次使用功能组件。你能帮我吗 ？

1个回答

React 是关于在组件树中向下流动的数据。如果你希望你Child能够显示和/或修改共享状态Child，Parent你应该提升你的状态并将它传递props给它children

const Parent = () =>{
    const [title, settitle] = useState('foo')

    return <Child title={title} setTitle={setTitle} />
}


const Child = ({ title, setTitle}) =>{
     return <input value={title} onChange={e => setTitle(e.target.value)} />
}

基于类的组件

class Parent extends React.Component{
    state = { title: '' }

    setTitle = title => this.setState({ title })

    render(){
        const { title } = this.state
        return <Child title={title} setTitle={this.setTitle} />
    }
}


class Child extends React.Component{
    render(){
        const { title, setTitle } = this.props
        return <input value={value} setTitle={e => setTitle(e.target.value)} />
    }
}
@Asma Destrucutreprops传递给功能组件是一个很好的模式，正如@Dupocas 在他的回答中所写的那样。因此，您必须写入props.title才能访问数据，只需键入title.
2021-06-05 15:15:17
没必要。这只是在我的例子中。我将更新答案，显示它在基于类的组件中是如何工作的
2021-06-08 15:15:17
我现在就在孩子身上得到它，你必须把 props.setTitle(e.target.value) 让它工作。太感谢了
2021-06-19 15:15:17
对不起，我无法得到它。我应该将我的父组件转换为功能组件吗？
2021-06-20 15:15:17
其它你可能感兴趣的问题
上一篇MaterialUI makeStyles 在 NextJS 中刷新时撤消自定义 css 下一篇为什么我的简单react组件打印控制台两次？