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

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}) => () => {&nbsp; &nbsp; &nbsp; console.log('it works!');&nbsp; &nbsp; &nbsp; console.log(stateKostul);&nbsp; &nbsp; &nbsp; //fetch to server}至：handleSubmit: (stateKostul) => () => {&nbsp; &nbsp; &nbsp; console.log('it works!');&nbsp; &nbsp; &nbsp; console.log(stateKostul);&nbsp; &nbsp; &nbsp; //fetch to server}

Answer 2

我将 AddProductForm 从功能组件更改为类组件并添加了方法 handleSubmit。猜猜问题出在上下文上。不确定如何，但现在有效这是我的代码：class AddProductForm extends React.Component{&nbsp; constructor(props){&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; title: '',&nbsp; &nbsp; &nbsp; location: '',&nbsp; &nbsp; &nbsp; description: '',&nbsp; &nbsp; &nbsp; photos: [],&nbsp; &nbsp; &nbsp; price: '',&nbsp; &nbsp; };&nbsp; &nbsp; this.handleSubmit = this.handleSubmit.bind(this);&nbsp; }&nbsp; handleSubmit(stateKostul) {&nbsp; &nbsp; console.log('it works!');&nbsp; &nbsp; console.log(stateKostul);&nbsp; &nbsp; //fetch to server&nbsp; }&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div className={s.container}>&nbsp; &nbsp; &nbsp; &nbsp; <h2 className={s.formTitle}>Add product</h2>&nbsp; &nbsp; &nbsp; &nbsp; <div className={s.formContainer}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <FormContainer initialValue={this.state} handleSubmit={this.handleSubmit}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // custom inputs and submit button&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </FormContainer>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}