Question

我有一个父组件App.js，看起来像这样

  export default class App extends React.Component {
   constructor(){
     super();
     this.state = {
            registerusername: '',
     }
    }

现在我有一个子组件ChildComp.js，它是App.js的直接子项，看起来像这样

  class ChildComp extends React.Component {
   render() {
    return (
    <View>
        <TextInput
                placeholder="Username"
                placeholderTextColor = 'black'
                onChangeText={(registerusername) => this.setState({registerusername})}
            />
       <Text>
         {this.state.registerusername.split(' ').map((word) => word && '').join(' ')}
       </Text>
    </View>
       }
     }

我正在尝试更改打印披萨徽标，就像TextInput字段下的反应原生文档一样。当状态registerusername在父组件中并且ChildComp是无状态时，我很难理解如何执行此操作。我正在我的ChildComp中执行`this.setState（{registerusername}）}但我不认为它引用了父级的状态。

Answer 1

在app'

setName = (name) => {
  this.setState({ registerusername: name })
}

render() {
  return (
    <div>
      <ChildComp registerusername={this.state.registerusername} setName={this.setName} />
    </div>
  )
}

在ChildComp中

  < TextInput
placeholder = "Username"
placeholderTextColor = 'black'
onChangeText = {(e) => this.props.setName(e.target.value)}
/>

  < Text >
  { this.props.registerusername.split(' ').map((word) => word && '').join(' ') }
           </Text >

如何在本机中更改父组件的子组件状态？

1 个答案: