Question

我正在使用FormContainer组件，该组件从父级接收initialValue（基本上为空字符串，表示输入值）和handleSubmit函数。 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组件/场景中使用它。我也使用recompose添加用于获取数据的处理程序。

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的状态传递给我的处理程序时，我无法找到。但是从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>

    );
  }
}

如何将组件的状态设置为父级？

2 个答案: