Question

我想将选定的日期（子组件）传递到表单（父组件）中。我使用react-native-datepicker依赖关系。我有子组件

export default class MyDatePicker extends Component {
    constructor(props){
    super(props)
    this.state = {
        date: moment().format("YYYY MM DD")
    }
} 
  render(){

    return (
      <DatePicker
        style={{width: 200}}
        date={this.state.date}
        mode="date"
        placeholder="select date"
        format="YYYY-MM-DD"
        ...
        //styles
        ...
        onDateChange={(date) => {this.setState({date: date})}}
      />
    )
  }
}

和父组件

export default class Footer extends Component {
    constructor(props){
        super(props)
        this.state = {
            sum:'',
            modalOpen: false,
            // monthYear: moment().format("MMMM YYYY")
            monthYear: ''
        }

        this.submitForm = this.submitForm.bind(this);
    }

    submitForm(){
        this.props.submitHandler(this.state.sum, this.state.monthYear);
        this.setState({ modalOpen: false });
    }

    render () {
        return (
            <View style={styles.footer}>
              //some code
                <MyPopup visible={this.state.modalOpen}>
                    <View style={styles.modal}>
                        // some code
                        <MyDatePicker  
                            //here child component
                            value={this.state.monthYear}
                        />
                        <Button style={styles.button} onPress={this.submitForm} title='Add your sum' />
                    </View>
                </MyPopup>
            </View> 
        );
    }
}

我尝试了不同的方法，但要么未定义，要么其他。如何在“父母提交”表单中获得正确的选定日期？有什么建议？谢谢

Answer 1

在React中执行所需操作的方法是将handleChange函数传递给MyDatePicker，然后在该组件内部，应通过将函数传递给onDateChange来调用该函数

您基本上可以将状态从MyDatePicker提升到Footer组件，并通过handleChange函数控制该状态。

在您的Footer内：

this.state = {
  sum:'',
  modalOpen: false,
  // monthYear: moment().format("MMMM YYYY"),
  monthYear: '',
  date: moment().format("YYYY MM DD") // Notice I added this
}

// More code here

handleChange(value) {
  this.setState({date: value})
}

在渲染中：

<MyDatePicker  
    //here child component
    value={this.state.date}
    handleChange={this.handleChange}
/>

在MyDatePicker（现在可以是功能组件）中：

function MyDatePicker(props) {
  return (
    <DatePicker
       style={{width: 200}}
       date={props.value} // I'm passing the date (value) from props instead of keeping the state
       mode="date"
       placeholder="select date"
       format="YYYY-MM-DD"
       ...
       //styles
       ...
       onDateChange={(date) => {props.handleChange(date)} // I added this
    />
}

将状态从子级传递到父级React Native

1 个答案: