如何將組件的狀態傳遞給父級？

Question

我正在使用FormContainer組件，它接收來自parent的initialValue（基本上是表示輸入值的空字符串）和handleSubmit函數。 FormContainer有狀態包含輸入值，onChange方法用於更新狀態，onSubmit方法。 我正在使用react上下文將onChange傳遞給input和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組件/場景中使用它。 我也使用重構來添加獲取數據的處理程序。

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。 當我從Form中將FormContainer的狀態傳遞給我的處理程序時，我得到了不明白的感覺。 但是從onSubmit狀態還可以。

而且由於FormContainer背后的想法，我無法從FormContainer獲取數據：它應該是任何形式的通用。

任何想法如何從FormContainer獲取數據而不改變它的結構？

Answer 1

我不熟悉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
}

Answer 2

我將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>

    );
  }
}