Question

我在我的React应用程序中遇到一个Child组件时遇到了麻烦，该组件的表单包含了一些更新的值，我希望将这些值传递回父项，以便可以更新状态。但是，当尝试更新子组件中的值时，该值未更改，并且出现以下错误...

 Warning: Failed form propType: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`. Check the render method of `TextInput`.

我有一个父级组件

export default class Patient extends React.Component {
 constructor(props) {
   super(props);
   autoBind(this);
   ...
   this.onOverviewChange = this.onOverviewChange.bind(this);
 }

onOverviewChange(event) {
   this.setState({[this.state.PATIENT[0].FName]: event.target.value});
  }

render() {
...
  <OverviewWrapper onchange={this.onOverviewChange} overview={this.state.PATIENT} ovtype={this.state.COMPPROPS} />
...
}

“概述包装器”组件确定面板是显示为只读还是可编辑...

 export default class OverviewWrapper extends React.Component {

constructor(props) {
    super(props);
    autoBind(this);
  }

render() {

    const overview = this.props.overview;
    const type = this.props.compState;

    let OverviewWrapper = null
    switch (type) {
        case "Edit" : 
            OverviewWrapper = OverviewEditPane
            break
        default: 
            OverviewWrapper = OverviewPane
            break
    }

    return <OverviewWrapper {...this.props}  />
}
}

然后，我有一个可编辑的组件，试图允许用户更改值。

export default class OverviewEditPane extends React.Component {  

constructor(props) {
  super(props);
  autoBind(this);

}

render () {
  return (
          <table>
            <FormFields>
                <tr>
                  <td>{this.props.overview.map((P) => {return <TextInput size='small'  key={P.id} id={P.id} value={P.FName} onChange={P.onOverviewChange}  />;})}</td>
                </tr>

患者数据JSON

"PATIENT": [{
    "id": 6,
    "FName": "Chris",
    "LName": "Baker",
    "Height": "62",
    "Weight": 320,
    "DOB": "1988-09-18T00:00:00",
    "Active": true
  }]

Answer 1

有两个错误。首先，您使用的是onChange，但是索环组件却使用了onDOMChange道具。您传递给onChange的回调也是错误的，您试图从onOverviewChange对象中获取patient，而不是从OverviewEditPane的道具中使用它。最后，您的状态更新程序不正确。尝试以下修复程序：

class OverviewEditPane extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { overview, onchange } = this.props;
    return (
      overview.map(
        (patient) =>
          <TextInput
            size='small'
            key={patient.id}
            id={patient.id}
            name={patient.id}
            value={patient.FName}
            onDOMChange={onchange} />
      )
    )
  }
}

class OverviewWrapper extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return <OverviewEditPane {...this.props} />
  }
}

class Patient extends React.Component {
  state = {
    PATIENT: [{
      id: 6,
      FName: "Chris",
      LName: "Baker",
      Height: "62",
      Weight: 320,
      DOB: "1988-09-18T00:00:00",
      Active: true
    }]
  }
  constructor(props) {
    super(props);
    this.onOverviewChange = this.onOverviewChange.bind(this);
  }

  onOverviewChange(event) {
    const { target: { value, id } } = event;
    this.setState(prevstate => ({
      PATIENT: prevstate.PATIENT.map(p => {
        if (p.id === parseInt(id, 10)) {
          p.FName = value;
        }
        return p;
      })
    }));
  }

  render() {
    return (
      <OverviewWrapper onchange={this.onOverviewChange} overview={this.state.PATIENT} ovtype={this.state.COMPPROPS} />
    )
  }
}

将更新的值从子组件传递到父组件

1 个答案: