如何在ReactJS中從props.children到其父級獲取數據？

Question

我正在嘗試從props.children [Input]到parent [Form]的數據中獲取數據，以構建一個一體的表單組件。 我目前停留在獲取數據到Input組件到Form組件上。

這是我到目前為止所做的=>

edit.js =>

export default class Edit extends Component {

    constructor(props) {
        super(props)
        this.state = {
            formFields: {
                name: '',
                email: ''
            }
        }
    }

    render() {
        return (
            <Form
                id={ this.props.match.params.id }
                onReceiveFormData={ this.onFiledDataChange.bind(this) }
            >
              <Input
                label='name'
                name='name'
                value='some'
              />
              <Input
                label='email'
                name='email'
                value='email@gmail'
              />
            </Form>
        );
    }
}

Input.js =>

export default class Input extends Component {

    constructor(props) {
        super(props)
        this.state = {
            value: this.props.value
        }
    }

    static setValue(val) {
        return val ? val : ''
    }

    handleInputChange = (event) => {
        this.setState({
            value : event.target.value
        })
        this.props.onInputChange({
            [event.target.name] : event.target.value
        })
    }

    render() {
        return (
            <input
                name={ this.props.name }
                value={ Input.setValue(this.state.value) }
            />
        );
    }
}

Form.js =>

 export default class Form extends Component {

    constructor(props) {
        super(props)
    }


    saveClick() {
       /**
        Save logic => I want to get the field data here
       **/
    }

    render() {
        return (<div>
                 {
                    this.props.children
                  }
                  <Button
                      onClick={ () => this.saveClick() }
                     >Save</Button>
                 </div>
        );
    }
}

例如，如果post-> edit page和user-> edit page =>我想在Form.js內設置輸入值，那么在安裝並安裝Form.js時，Form.js將負責在這些Inputs內設置值。它將負責將數據發送到服務器。

我想知道，我所建議的方案是可能的，或者有更好的方法嗎？

Answer 1

反轉控制（使Input為受控組件）。 通常，不必要地在組件內部保持狀態是一種不良的設計實踐。 查看現有的<input>它需要一個value和一個onChange 。 您的組件也應該這樣做。

const Input = ({
  className,
  ...rest
}) => (
  <input
    className={classNames('Input', className)}
    type="text"
    {...rest}
  />
);

然后，父級具有表單在“編輯”中提交時的狀態。

onFormSubmit = e => {
  e.preventDefault();
  console.log(this.state.name, this.state.email);
}

onChange = name => e => this.setState({ [name]: e.target.value })

// ...
<Input onChange={this.onChange('name')} value={this.state.name} />
<Input onChange={this.onChange('email')} value={this.state.email} />

如果要讓Form偵聽狀態更改，可以執行以下操作：

onChange = (e, originalOnChange) => {
  console.log('onChange called:', e.target.value);
  originalOnChange && originalOnChange(e);
}

// ...
const children = React.Children.map(this.props.children, child =>
  React.cloneElement(child, { onChange: e => this.onChange(e, child.props.onChange) })
);

這有點不合常規，但在技術上是可以實現的。