如何将组件的状态传递给父级？

Question

我正在使用 FormContainer 组件，它从父级接收初始值（基本上是空字符串，表示输入值）和 handleSubmit 函数。FormContainer 有包含输入值的状态，用于更新状态的 onChange 方法，onSubmit 方法。我正在使用反应上下文将 onChange 传递给输入，并将 onSubmit 传递给提交按钮。表单容器代码：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 组件/场景中使用它。我还使用 recompose 添加处理程序来获取数据。添加产品表单代码：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 的状态从 props 传递给我的处理程序时，我得到了 undefind。但是从 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>

    );

  }

}