Question

我不知道该怎么做

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

根据上一页中单击的按钮，两者都会

渲染输入字段。现在，我想获取一个渲染状态，然后

将其传递给我认为已导出的类

这是我的两个班级

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>

    )

  }

}

其中的

会根据所传递的值来呈现

上一页，要呈现的页面由简单的if来确定

声明

const doctor = <DoctorInput />

const patient = <PatientInput />

let userType;

if (this.props.navigation.getParam('userType') == 'doctor') userType = doctor;

else userType = patient

然后我只需添加{ userType }即可呈现我需要的那个，

现在的问题是我完全不知道如何掌握状态

呈现给主类提交功能的输入

这是我的提交功能

signUp = async () => {

await this.setState({ userType : this.props.navigation.getParam('userType') });

let user = this.state;

console.log(user);

}

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

Answer 1

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

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

您可以将此功能添加到子组件

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

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

在子组件中，您可以

更改时访问输入值，并更新父项的本地状态。

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

但是，我不建议这种解决方案，因为这将变得过于复杂，并给您的代码库增加负担。但是，如果您决定采用这种方法，我将使功能集状态成为键/值的对象，以便更好地从父级访问。

您看过Formik吗？ https://github.com/jaredpalmer/formik可以减轻您的工作负担。

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

1 个答案: