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

Question

我有两个组件：

• 第一个是父组件，它是通常的 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} />
         }

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

Answer 1

React 是关于在组件树中向下流动的数据。如果您希望您的Child 能够显示和/或修改Child 和Parent 之间的共享状态，您应该lift your state up 并通过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)} />
    }
}