Как передать состояние компонента до родительского?

Question

Я использую компонент FormContainer, который получает initialValue (в основном пустые строки, представляющие входные значения) и функцию handleSubmit от parent. FormContainer имеет состояние ведьмы, содержит входные значения, метод onChange для обновления состояния, метод onSubmit. Я использую реагирующий контекст для передачи onChange на входы и onSubmit для отправки кнопки.

Код FormContainer:

export const FormContext = React.createContext(null);

class FormContainer extends Component {
  constructor(props) {
  super(props);
  this.state = props.initialValue;
}

onChange(name, value) {
  this.setState({ [name]: value });
}

onSubmit(){
  const stateKostul = this.state;
  console.log(stateKostul);
  this.props.handleSubmit(stateKostul);
}

render() {
  const value={
    formState: this.state,
    onChange: (name, value) => this.onChange(name, value),
    onSubmit: () =>this.onSubmit(),
  };
  return (
    <FormContext.Provider value={value}>
      {this.props.children}
    </FormContext.Provider>
  ); 
 }
}

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

Добавить товарКод формы:

function AddProductForm({ handleSubmit }) {
  const initialValue = {
    title: '',
    location: '',
    description: '',
    photos: [],
    price: '',
  };

  return (
    <div className={s.container}>
      <h2 className={s.formTitle}>Add product</h2>
      <div className={s.formContainer}>
        <FormContainer 
         initialValue={initialValue}
         handleSubmit={handleSubmit}
        >
           // custom inputs and submit button
        </FormContainer>
      </div>
    </div>
  );
}

const enhancer = compose(
  withHandlers({
    handleSubmit: ({stateKostul}) => () => {
      console.log('it works!');
      console.log(stateKostul);
      //fetch to server
    },
  }),
);

export default enhancer(AddProductForm);

Так что моя проблема в том, что я не знаю, как передать данные из состояния FormContainer в AddProductForm. Когда я передаю состояние FormContainer своему обработчику из реквизита, я получаю undefind. Но с onSubmit состояние в порядке.

И я не могу получить данные из FormContainer из-за идеи, лежащей в основе FormContainer: она должна быть универсальной для любой формы.

Есть идеи, как я могу получить данные из FormContainer без изменения его структуры?

Answer 1

Я изменил AddProductForm с функционального компонента на компонент класса и добавил метод handleSubmit. Угадай, проблема была в контексте. Не уверен, как, но это работает сейчас

вот мой код:

class AddProductForm extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      title: '',
      location: '',
      description: '',
      photos: [],
      price: '',
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(stateKostul) {
    console.log('it works!');
    console.log(stateKostul);
    //fetch to server
  }


  render() {
    return (
      <div className={s.container}>
        <h2 className={s.formTitle}>Add product</h2>
        <div className={s.formContainer}>
          <FormContainer initialValue={this.state} handleSubmit={this.handleSubmit}>
            // custom inputs and submit button
          </FormContainer>
        </div>
      </div>

    );
  }
}

Answer 2

Я не знаком с FormContext / Enhancer, однако думаю, что ваша ошибка в вашем энхансере.Вы уничтожаете объект, возвращенный из обработчика onSubmit, ища свойство "stateKostul"."stateKostul", вероятно, не определен в состоянии FormContainer.Это просто имя переменной, которую вы передали в нее.

Попробуйте изменить:

handleSubmit: ({stateKostul}) => () => {
      console.log('it works!');
      console.log(stateKostul);
      //fetch to server
}

на:

handleSubmit: (stateKostul) => () => {
      console.log('it works!');
      console.log(stateKostul);
      //fetch to server
}