Mam następującą strukturę:

FormEditor- posiada wiele FieldEditor FieldEditor- edytuje pole formularza i zapisuje różne wartości na jego temat w jego stanie

Po kliknięciu przycisku w formularzu FormEditor chcę być w stanie zebrać informacje o polach ze wszystkich FieldEditorskładników, informacje w ich stanie i mieć je wszystkie w formularzu FormEditor.

Rozważyłem przechowywanie informacji o polach poza FieldEditorstanem i FormEditorzamiast tego umieściłem je w stanie. Wymagałoby FormEditorto jednak wysłuchania każdego z jego FieldEditorskładników, gdy zmieniają się i przechowują informacje w tym stanie.

Czy nie mogę po prostu uzyskać dostępu do stanu dzieci? Czy to jest idealne?

Jeśli masz już moduł obsługi onChange dla poszczególnych FieldEditors, nie rozumiem, dlaczego nie możesz po prostu przenieść stanu do komponentu FormEditor i po prostu przekazać stamtąd wywołanie zwrotne do FieldEditors, które zaktualizują stan nadrzędny. Dla mnie to wydaje się bardziej reaktywnym sposobem.

Być może coś w tym rodzaju:

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

Oryginał - wersja z zaczepami:

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

Zanim przejdę do szczegółów na temat uzyskiwania dostępu do stanu elementu potomnego, przeczytaj odpowiedź Markusa-ipse dotyczącą lepszego rozwiązania tego konkretnego scenariusza.

Jeśli rzeczywiście chcesz uzyskać dostęp do stanu elementów potomnych komponentu, możesz przypisać właściwość wywoływaną refdla każdego elementu potomnego. Istnieją teraz dwa sposoby implementacji referencji: Korzystanie z referencji React.createRef()i wywołanie zwrotne.

Za pomocą React.createRef()

Jest to obecnie zalecany sposób używania referencji od React 16.3 ( Więcej informacji można znaleźć w dokumentacji ). Jeśli używasz wcześniejszej wersji, zapoznaj się z poniższymi informacjami na temat odwołań zwrotnych.

Musisz utworzyć nowe odwołanie w konstruktorze komponentu nadrzędnego, a następnie przypisać je do elementu podrzędnego za pomocą refatrybutu.

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

Aby uzyskać dostęp do tego rodzaju referencji, musisz użyć:

const currentFieldEditor1 = this.FieldEditor1.current;

Zwróci to instancję zamontowanego komponentu, abyś mógł następnie użyć, currentFieldEditor1.stateaby uzyskać dostęp do stanu.

Krótka uwaga, aby powiedzieć, że jeśli użyjesz tych odniesień w węźle DOM zamiast w komponencie (np. <div ref={this.divRef} />), Wówczas this.divRef.currentzwróci podstawowy element DOM zamiast instancji komponentu.

Oddzwanianie

Ta właściwość przyjmuje funkcję wywołania zwrotnego, która jest przekazywana do dołączonego komponentu. To wywołanie zwrotne jest wykonywane natychmiast po zamontowaniu lub odmontowaniu komponentu.

Na przykład:

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

W tych przykładach odwołanie jest przechowywane w komponencie nadrzędnym. Aby wywołać ten składnik w kodzie, możesz użyć:

this.fieldEditor1

a następnie użyj, this.fieldEditor1.stateaby uzyskać stan.

Należy zwrócić uwagę na jedną rzecz: upewnij się, że komponent potomny jest renderowany, zanim spróbujesz uzyskać do niego dostęp ^ ^ ^

Jak wyżej, jeśli użyjesz tych odniesień w węźle DOM zamiast w komponencie (np. <div ref={(divRef) => {this.myDiv = divRef;}} />), Wówczas this.divRefzwróci podstawowy element DOM zamiast instancji komponentu.

Dalsza informacja

Jeśli chcesz dowiedzieć się więcej o nieruchomości referencyjnej React, sprawdź tę stronę na Facebooku.

Upewnij się, że przeczytałeś sekcję „ Nie nadużywaj referencji ”, która mówi, że nie powinieneś używać dziecka statedo „sprawiania, by coś się działo”.

Mam nadzieję, że to pomoże ^ _ ^

Edycja: Dodano React.createRef()metodę tworzenia referencji. Usunięto kod ES5.

Jest rok 2020 i wielu z was przyjedzie tutaj, szukając podobnego rozwiązania, ale z Hakami (są świetne!) I najnowszymi podejściami pod względem czystości kodu i składni.

Tak więc, jak stwierdzono w poprzednich odpowiedziach, najlepszym podejściem do tego rodzaju problemu jest utrzymywanie stanu poza komponentem potomnym fieldEditor. Możesz to zrobić na wiele sposobów.

Najbardziej „skomplikowany” jest kontekst globalny (stan), do którego zarówno rodzic, jak i dziecko mogą uzyskać dostęp i modyfikować. To świetne rozwiązanie, gdy komponenty znajdują się bardzo głęboko w hierarchii drzew, a zatem kosztowne jest wysyłanie rekwizytów na każdym poziomie.

W tym przypadku uważam, że nie jest tego warte, a prostsze podejście przyniesie nam pożądane wyniki, używając tylko potężnego React.useState().

Podejdź do haka React.useState (), znacznie prościej niż przy komponentach Class

Jak już powiedzieliśmy, zajmiemy się zmianami i będziemy przechowywać dane naszego elementu potomnego fieldEditorw naszym rodzicu fieldForm. Aby to zrobić, wyślemy referencję do funkcji, która zajmie się zmianami fieldFormstanu i zastosuje je , możesz to zrobić za pomocą:

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

Zauważ, że React.useState({})zwróci tablicę z pozycją 0 będącą wartością określoną podczas wywołania (w tym przypadku pusty obiekt), a pozycja 1 będzie odniesieniem do funkcji, która modyfikuje wartość.

Teraz dzięki komponentowi FieldEditorpotomnemu nie musisz nawet tworzyć funkcji z instrukcją return, wystarczy stała stała z funkcją strzałki!

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

Aaaaaaaaaaaaaaaaaaaaaa, i nic więcej, tylko te dwa śluzowe elementy funkcjonalne mają nasz cel końcowy „dostęp” do naszej FieldEditorwartości dla dziecka i pokazanie jej u naszego rodzica.

Możesz sprawdzić zaakceptowaną odpowiedź sprzed 5 lat i zobaczyć, w jaki sposób Hooks sprawił, że kod React był węższy (o wiele!).

Mam nadzieję, że moja odpowiedź pomoże Ci dowiedzieć się i zrozumieć więcej o Hakach, a jeśli chcesz sprawdzić działający przykład, oto ona .

Teraz możesz uzyskać dostęp do stanu InputField, który jest potomkiem FormEditor.

Zasadniczo za każdym razem, gdy następuje zmiana stanu pola wejściowego (dziecko), otrzymujemy wartość z obiektu zdarzenia, a następnie przekazujemy tę wartość do obiektu nadrzędnego, w którym ustawiony jest stan w obiekcie nadrzędnym.

Po kliknięciu przycisku drukujemy tylko stan pól wejściowych.

Kluczową kwestią jest to, że używamy rekwizytów, aby uzyskać identyfikator / wartość pola wejściowego, a także wywołać funkcje ustawione jako atrybuty w polu wejściowym podczas generowania potomnych pól wejściowych wielokrotnego użytku.

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

Jak powiedziano w poprzednich odpowiedziach, spróbuj przenieść stan do najwyższego komponentu i zmodyfikuj go przez wywołania zwrotne przekazywane do jego dzieci.

Jeśli naprawdę potrzebujesz dostępu do stanu potomnego zadeklarowanego jako składnik funkcjonalny (przechwytuje), możesz zadeklarować ref w komponencie nadrzędnym, a następnie przekazać go jako atrybut ref do dziecka, ale musisz użyć React.forwardRef a następnie hook użyjImperativeHandle, aby zadeklarować funkcję, którą możesz wywołać w komponencie nadrzędnym.

Spójrz na następujący przykład:

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

Następnie powinieneś być w stanie uzyskać myState w komponencie Parent, wywołując: myRef.current.getMyState();