如何在React中访问孩子的状态?

2020/10/12 17:41 · javascript ·  · 0评论

我有以下结构:

FormEditor-包含多个FieldEditor-
FieldEditor编辑表单的字段并在其状态下保存有关该字段的各种值

在FormEditor中单击按钮时,我希望能够从所有FieldEditor组件中收集有关字段的信息,处于其状态的信息,并将其全部保存在FormEditor中。

我考虑过将有关字段信息的信息存储在FieldEditor的状态之外,而将其置于FormEditor的状态。但是,这将需要FormEditorFieldEditor组件的每个组件发生更改时侦听它们并以其状态存储其信息。

我不能只访问儿童的州吗?理想吗?

如果您已经具有用于单个FieldEditor的onChange处理函数,那么我不明白为什么不能将状态仅移至FormEditor组件,而仅将回调从那里传递给FieldEditor,以更新父状态。对我来说,这似乎是一种更React-y的方式。

可能与此类似:

const FieldEditor = ({ value, onChange, id }) => {
  const handleChange = event => {
    const text = event.target.value;
    onChange(id, text);
  };

  return (
    <div className="field-editor">
      <input onChange={handleChange} value={value} />
    </div>
  );
};

const FormEditor = props => {
  const [values, setValues] = useState({});
  const handleFieldChange = (fieldId, value) => {
    setValues({ ...values, [fieldId]: value });
  };

  const fields = props.fields.map(field => (
    <FieldEditor
      key={field}
      id={field}
      onChange={handleFieldChange}
      value={values[field]}
    />
  ));

  return (
    <div>
      {fields}
      <pre>{JSON.stringify(values, null, 2)}</pre>
    </div>
  );
};

// To add abillity to dynamically add/remove fields keep the list in state
const App = () => {
  const fields = ["field1", "field2", "anotherField"];

  return <FormEditor fields={fields} />;
};

原始-钩前版本:

在我详细介绍如何访问子组件的状态之前,请确保阅读Markus-ipse的答案,该答案提供了一种更好的解决方案来处理这种特殊情况。

如果确实希望访问组件子级的状态,则可以为ref每个子级分配一个称为的属性现在有两种实现引用的方式:使用React.createRef()和回调引用。

使用 React.createRef()

从React 16.3开始,这是当前推荐使用引用的推荐方式(有关更多信息,请参阅文档)。如果您使用的是早期版本,请参见下文有关回调引用的信息。

您需要在父组件的构造函数中创建一个新引用,然后通过ref属性将其分配给子组件

class FormEditor extends React.Component {
  constructor(props) {
    super(props);
    this.FieldEditor1 = React.createRef();
  }
  render() {
    return <FieldEditor ref={this.FieldEditor1} />;
  }
}

为了访问这种引用,您需要使用:

const currentFieldEditor1 = this.FieldEditor1.current;

这将返回已安装组件的实例,因此您可以currentFieldEditor1.state用来访问状态。

简要说明一下,如果您在DOM节点而不是组件(例如<div ref={this.divRef} />上使用这些引用,this.divRef.current则将返回基础DOM元素而不是组件实例。

回调引用

此属性采用回调函数,该回调函数传递对附加组件的引用。在安装或卸载组件后立即执行此回调。

例如:

<FieldEditor
    ref={(fieldEditor1) => {this.fieldEditor1 = fieldEditor1;}
    {...props}
/>

在这些示例中,引用存储在父组件上。要在代码中调用此组件,可以使用:

this.fieldEditor1

然后用于this.fieldEditor1.state获取状态。

需要注意的一件事,在尝试访问子组件之前,请确保其子组件已渲染

如上所述,如果您在DOM节点而不是组件(例如<div ref={(divRef) => {this.myDiv = divRef;}} />上使用这些引用,this.divRef则将返回基础DOM元素而不是组件实例。

更多信息

如果您想了解更多关于React的ref属性的信息,请从Facebook上查看此页面

确保阅读了“不要过度使用引用”部分,该部分指出您不应该使用孩子的state“使事情发生”。

希望这可以帮助^ _ ^

编辑:添加React.createRef()了创建引用的方法。删除了ES5代码。

它的2020年以及许多人将来到这里寻找类似的解决方案,但要使用Hooks(它们很棒!),并提供有关代码整洁度和语法的最新方法。

因此,如先前的回答所述,解决此类问题的最佳方法是将状态保持在子组件之外fieldEditor您可以通过多种方式做到这一点。

最“复杂”的是具有父级和子级都可以访问和修改的全局上下文(状态)。当组件在树层次结构中非常深时,这是一个很好的解决方案,因此在每个级别发送道具的成本很高。

在这种情况下,我认为它不值得,并且更简单的方法仅使用功能强大的方法即可为我们带来所需的结果React.useState()

使用React.useState()钩子的方法,比使用Class组件更简单

如前所述,我们将处理更改并将子组件的数据存储fieldEditor在父组件fieldForm为此,我们将发送一个引用,该引用将处理并将更改应用于fieldForm状态,您可以使用以下方法进行操作:

function FieldForm({ fields }) {
  const [fieldsValues, setFieldsValues] = React.useState({});
  const handleChange = (event, fieldId) => {
    let newFields = { ...fieldsValues };
    newFields[fieldId] = event.target.value;

    setFieldsValues(newFields);
  };

  return (
    <div>
      {fields.map(field => (
        <FieldEditor
          key={field}
          id={field}
          handleChange={handleChange}
          value={fieldsValues[field]}
        />
      ))}
      <div>{JSON.stringify(fieldsValues)}</div>
    </div>
  );
}

请注意,React.useState({})将返回一个数组,其中位置0是调用时指定的值(在这种情况下为Empty对象),位置1是对修改该值的函数的引用。

现在,有了子组件,FieldEditor您甚至不需要创建带有return语句的函数,带有箭头函数的精益常量就可以了!

const FieldEditor = ({ id, value, handleChange }) => (
  <div className="field-editor">
    <input onChange={event => handleChange(event, id)} value={value} />
  </div>
);

Aaaa和我们完成了,仅此两个粘液功能组件,我们的最终目标就是“访问”我们的孩子FieldEditor价值,并在我们的父母中炫耀它。

您可以检查5年前接受的答案,并了解Hooks如何使React代码变得更精简(很多!)。

希望我的回答可以帮助您学习和了解有关Hooks的更多信息,如果您想在此处查看一个有效的示例,请参见

如先前的回答所述,请尝试将状态移至顶部组件,并通过传递给其子级的回调来修改状态。

如果您确实需要访问被声明为功能组件(挂钩)的子状态,则可以在父组件中声明ref,然后将其作为ref属性传递给孩子,但是您需要使用React.forwardRef然后钩子useImperativeHandle声明一个可以在父组件中调用的函数。

看下面的例子:

const Parent = () => {
    const myRef = useRef();
    return <Child ref={myRef} />;
}

const Child = React.forwardRef((props, ref) => {
    const [myState, setMyState] = useState('This is my state!');
    useImperativeHandle(ref, () => ({getMyState: () => {return myState}}), [myState]);
})

然后,您应该能够通过调用以下命令在父组件中获取myState:
myRef.current.getMyState();

现在,您可以访问InputField的状态,该状态是FormEditor的子级。

基本上,只要输入字段(子级)的状态发生变化,我们就从事件对象获取值,然后将该值传递给父级,并在父级中设置状态。

单击按钮,我们只是打印输入字段的状态。

这里的关键点是,我们在生成可重用的子输入字段时,使用道具来获取输入字段的ID /值,并调用在输入字段上设置为属性的函数。

class InputField extends React.Component{
  handleChange = (event)=> {
    const val = event.target.value;
    this.props.onChange(this.props.id , val);
  }

  render() {
    return(
      <div>
        <input type="text" onChange={this.handleChange} value={this.props.value}/>
        <br/><br/>
      </div>
    );
  }
}       


class FormEditorParent extends React.Component {
  state = {};
  handleFieldChange = (inputFieldId , inputFieldValue) => {
    this.setState({[inputFieldId]:inputFieldValue});
  }
  //on Button click simply get the state of the input field
  handleClick = ()=>{
    console.log(JSON.stringify(this.state));
  }

  render() {
    const fields = this.props.fields.map(field => (
      <InputField
        key={field}
        id={field}
        onChange={this.handleFieldChange}
        value={this.state[field]}
      />
    ));

    return (
      <div>
        <div>
          <button onClick={this.handleClick}>Click Me</button>
        </div>
        <div>
          {fields}
        </div>
      </div>
    );
  }
}

const App = () => {
  const fields = ["field1", "field2", "anotherField"];
  return <FormEditorParent fields={fields} />;
};

ReactDOM.render(<App/>, mountNode);
本文地址:http://javascript.askforanswer.com/ruhezaireactzhongfangwenhaizidezhuangtai.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!