Javascript 在React Native中传递来自两个类的数据

我不知道怎么做

我有两个类有输入字段，其中一个将被渲染

根据上一页上单击的按钮，它们都将

渲染输入字段。现在，我想获取渲染对象的状态，然后

在我的视图中将其传递给导出的类

这是我的两堂课

class DoctorInput extends React.Component {

  constructor(props) {

    super(props);

    this.state = { practitionerType: '', employee : '', clinic : '' };

  }

  render() {

    return (

      <View>

        <Dropdown style={{ flex : 1, textAlign: 'center' }} inputContainerStyle={{ alignItems: 'center' }} titleTextStyle={{ textAlign: 'center' }} data={ FormData.practitionerType } onChangeText={ (dentistType) => this.setState({ practitionerType : dentistType }) } label="Dentist Type" />

        <TextField style={{ flex : 1, textAlign: 'center' }} inputContainerStyle={{ alignItems: 'center' }} titleTextStyle={{ textAlign: 'center' }} onChangeText={ (employeeNumber) => this.setState({ employee : employeeNumber }) } label="Registeration N./ Student N." />

        <TextField style={{ flex : 1, textAlign: 'center' }} inputContainerStyle={{ alignItems: 'center' }} titleTextStyle={{ textAlign: 'center' }} onChangeText={ (clinicAddress) => this.setState({ clinic : clinicAddress }) } label="Clinic Address" />

      </View>

    )

  }

}

class PatientInput extends React.Component {

  constructor(props) {

    super(props);

    this.state = { history: '' };

  }

  render() {

    return (

      <View>

        <TextField style={{ flex : 1, textAlign: 'center' }} inputContainerStyle={{ alignItems: 'center' }} titleTextStyle={{ textAlign: 'center' }} onChangeText={ (history) => this.setState({ history : history }) } label="History" />

      </View>

    )

  }

}

---

如何获取DoctorInput或PatientInput字段的值？

您可以向父级添加一个函数，该函数接受一个值并设置本地状态

handleInput(theInputValue){ 
 this.setState({inputValue: theInputValue}) 
}

可以将此函数添加到子组件中

const doctor = <DoctorInput callback={this.handleInput} />

const patient = <PatientInput callback={this.handleInput} />

const医生=
常数病人=

在子组件中，您可以在更改时访问输入的值，并更新父组件的本地状态

    <TextField onChangeText={e=>this.props.callback(e.val)}/>

this.props.callback（e.val）}/>

一、 但是，不要建议使用此解决方案，因为这将变得过于复杂，并加重代码库的负担。但是，如果您决定采用这种方法，我会将函数集状态设置为键/值的对象，以便更好地从父级访问

    <TextField onChangeText={e=>this.props.callback(e.val)}/>

---

你见过福米克吗？可以减轻你的工作负担

您是否使用redux或mobx进行状态管理？也许值得一看into@TallPaul你真的认为这需要引入redux吗？我同意@1252748，在这种情况下，添加状态管理工具的负担可能太重了。我相信这将是一个可行的解决方案（在大多数情况下，这实际上是表单包的工作方式），但决策不应该仅仅基于在调用回调和formik等选项时需要子输入来更新父状态available@1252748并不是说这是添加它的唯一原因。我刚刚发现，应用程序一开始很简单，但总是会遇到这样的小问题，这些问题可以通过在屏幕之间共享状态来解决。另一种选择是将其存储在localstate中，但它不是我的项目，只要求澄清。

    <TextField onChangeText={e=>this.props.callback(e.val)}/>