代码之家 › 专栏 › 技术社区 › jgoraya

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

reactjs

jgoraya · 技术社区 · 6 年前

我很难使用React应用程序中的子组件,该组件的表单包含更新的值,我希望将这些值传递回父组件,以便可以更新状态。但是,当试图更新子组件中的值时,该值不会更改,我得到以下错误。。。

 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} />
...
}

Overview Wrapper组件确定面板显示为只读还是可编辑。。。

 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
  }]

1 回复 | 直到 6 年前

SrThompson 6 年前

有几个虫子。首先,你在使用 onChange ,但你的扣环组件需要 onDOMChange 代替道具。你要传递给的回调 一旦改变 也是错的,你想 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} />
    )
  }
}