У меня есть следующая структура:

FormEditor- содержит несколько FieldEditor FieldEditor- редактирует поле формы и сохраняет различные значения об этом в своем состоянии

Когда кнопка нажата в FormEditor, я хочу иметь возможность собирать информацию о полях из всех FieldEditorкомпонентов, информацию, которая находится в их состоянии, и иметь все это в FormEditor.

Я подумал о том, чтобы хранить информацию о полях за пределами FieldEditorроссийского состояния и FormEditorвместо этого переводить ее в состояние. Однако для этого потребуется FormEditorпрослушивать каждый из его FieldEditorкомпонентов по мере их изменения и сохранять свою информацию в своем состоянии.

Разве я не могу просто получить доступ к состоянию детей? Это идеально?

Если у вас уже есть обработчик onChange для отдельных FieldEditors, я не понимаю, почему вы не могли просто переместить состояние в компонент FormEditor и просто передать обратный вызов оттуда в FieldEditors, который обновит родительское состояние. Мне кажется, это более эффективный способ сделать это.

Возможно, что-то в этом роде:

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

Оригинал - версия с предварительным крючком:

class FieldEditor extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

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

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

class FormEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};

    this.handleFieldChange = this.handleFieldChange.bind(this);
  }

  handleFieldChange(fieldId, value) {
    this.setState({ [fieldId]: value });
  }

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

    return (
      <div>
        {fields}
        <div>{JSON.stringify(this.state)}</div>
      </div>
    );
  }
}

// Convert to class component and add ability to dynamically add/remove fields by having it in state
const App = () => {
  const fields = ["field1", "field2", "anotherField"];

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

ReactDOM.render(<App />, document.body);

Непосредственно перед тем, как я подробно расскажу о том, как вы можете получить доступ к состоянию дочернего компонента, пожалуйста, прочитайте ответ Markus-ipse относительно лучшего решения для этого конкретного сценария.

Если вы действительно хотите получить доступ к состоянию дочерних компонентов, вы можете назначить свойство, вызываемое refдля каждого дочернего элемента . Теперь есть два способа реализации ссылок: использование React.createRef()и обратный вызов refs.

С помощью 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, проверьте эту страницу на Facebook.

Обязательно прочитайте раздел « Не злоупотребляйте ссылками », в котором говорится, что вы не должны использовать ребенка, stateчтобы «добиться успеха».

Надеюсь, это поможет ^ _ ^

Редактировать: Добавлен React.createRef()метод для создания ссылок. Удален код ES5.

Его 2020 и многие из вас приедут сюда в поисках аналогичного решения, но с Хуками (они великолепны!) И с новейшими подходами с точки зрения чистоты кода и синтаксиса.

Таким образом, как указывалось в предыдущих ответах, наилучший подход к решению этой проблемы состоит в том, чтобы удерживать состояние вне дочернего компонента fieldEditor. Вы можете сделать это несколькими способами.

Наиболее «сложным» является глобальный контекст (состояние), к которому могут обращаться и изменять как родитель, так и потомки. Это отличное решение, когда компоненты очень глубоко в древовидной иерархии, и поэтому дорого отправлять реквизиты на каждом уровне.

В этом случае я думаю, что это того не стоит, и более простой подход принесет нам результаты, которых мы хотим, просто используя мощные React.useState().

Подход с хуком React.useState (), намного проще, чем с компонентами класса

Как уже было сказано, мы будем иметь дело с изменениями и будем хранить данные нашего дочернего компонента 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, являющейся значением, указанным при вызове (в данном случае пустым объектом), а позицией 1 будет ссылка на функцию, которая изменяет значение.

Теперь, с дочерним компонентом, FieldEditorвам даже не нужно создавать функцию с оператором return, подойдет константа lean с функцией стрелки!

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

Аааа, и все готово, не более того, только с этими двумя функциональными компонентами слизи у нас есть конечная цель - получить доступ к нашему дочернему FieldEditorзначению и показать его в нашем родителе.

Вы можете проверить принятый ответ 5 лет назад и посмотреть, как Hooks сделал код React более простым (на много!).

Надеюсь, мой ответ поможет вам узнать и понять больше о крючках, и если вы хотите проверить рабочий пример, вот он .

Теперь вы можете получить доступ к состоянию InputField, которое является дочерним по отношению к FormEditor.

По сути, всякий раз, когда происходит изменение в состоянии поля ввода (дочернего), мы получаем значение из объекта события и затем передаем это значение в Parent, где устанавливается состояние в Parent.

При нажатии кнопки мы просто печатаем состояние полей ввода.

Ключевым моментом здесь является то, что мы используем реквизиты для получения идентификатора / значения поля ввода, а также для вызова функций, которые задаются как атрибуты поля ввода, в то время как мы генерируем многократно используемые дочерние поля ввода.

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);

Как и в предыдущих ответах, попробуйте переместить состояние в верхний компонент и изменить его с помощью обратных вызовов, передаваемых его дочерним элементам.

В случае, если вам действительно нужен доступ к дочернему состоянию, которое объявлено как функциональный компонент (хуки), вы можете объявить 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();