Question

我有两个部分，编辑（子级）和索引（父级）。 Edit 组件中有三个输入框，我想这样做：

将这三个引用传递给 Index 组件
比较通过引用（特别是在HandleUpdate函数中）获得的这些输入

Edit.js ：

<form onSubmit={props.handleUpdate}>
        <input 
            className=""
            name="name" 
            ref={props.setRef}                          
            onChange={props.handleChange}
            defaultValue= {props.name} /> 
        <input 
            className=""
            type="number" 
            name="day"
            min="1" 
            max="31"
            ref={props.setRef}
            onChange={props.handleChange}
            defaultValue= {props.day}  />
        <input 
            className=""
            name="dob"
            type="month"    
            ref={props.setRef}                          
            onChange={props.handleChange}
            defaultValue={props.dob} />

Index.js ：

class BirthdaylistKeeper extends React.Component{
    constructor(props){
        super(props);
   //state
}
...
handleUpdate(event){
        event.preventDefault(); 
            //if((name.value === "") && (dob.value === "") && (day.value === "")){
            //  console.log("empty");
            //}

            const item = this.state.currentItem;
            let index = this.state.items.indexOf(item);
            const newItemList = [...this.state.items];
            newItemList.splice(index, 1, this.state.dataEdited);

            this.setState({ 
                items: [...newItemList],
                toggle: false 
            });

    }   
//...
render(){
        return(
            ...
                <Entry
                    name={this.state.name}
                    day={this.state.day}
                    dob={this.state.dob}
                    onChange={this.handleChange}
                    onSubmit={this.handleSubmit} 
                    setRef={this.setRef} /> 

)
}

我该如何实现？

从子组件传递多个引用到父组件-React.js

0 个答案: