第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何將組件的狀態(tài)傳遞給父級?

如何將組件的狀態(tài)傳遞給父級?

素胚勾勒不出你 2021-06-18 05:12:57
我正在使用 FormContainer 組件,它從父級接收初始值(基本上是空字符串,表示輸入值)和 handleSubmit 函數(shù)。FormContainer 有包含輸入值的狀態(tài),用于更新狀態(tài)的 onChange 方法,onSubmit 方法。我正在使用反應(yīng)上下文將 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 添加處理程序來獲取數(shù)據(jù)。添加產(chǎn)品表單代碼: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);所以我的問題是我不知道如何將數(shù)據(jù)從 FormContainer 的狀態(tài)傳遞到 AddProductForm。當(dāng)我將 FormContainer 的狀態(tài)從 props 傳遞給我的處理程序時,我得到了 undefind。但是從 onSubmit 狀態(tài)就可以了。而且我無法從 FormContainer 獲取數(shù)據(jù),因為 FormContainer 背后的想法:它應(yīng)該對任何形式都是通用的。任何想法如何在不改變其結(jié)構(gòu)的情況下從 FormContainer 獲取數(shù)據(jù)?
查看完整描述

2 回答

?
弒天下

TA貢獻1818條經(jīng)驗 獲得超8個贊

我不熟悉 FormContext/Enhancer,但是我認(rèn)為您的錯誤在于您的增強器。您正在解構(gòu)從 onSubmit 處理程序返回的對象,以尋找屬性“stateKostul”?!皊tateKostul”可能未在 FormContainer 的狀態(tài)中定義。這只是您傳遞給它的變量的名稱。


嘗試改變:


handleSubmit: ({stateKostul}) => () => {

      console.log('it works!');

      console.log(stateKostul);

      //fetch to server

}

至:


handleSubmit: (stateKostul) => () => {

      console.log('it works!');

      console.log(stateKostul);

      //fetch to server

}


查看完整回答
反對 回復(fù) 2021-06-24
?
Helenr

TA貢獻1780條經(jīng)驗 獲得超4個贊

我將 AddProductForm 從功能組件更改為類組件并添加了方法 handleSubmit。猜猜問題出在上下文上。不確定如何,但現(xiàn)在有效


這是我的代碼:


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>


    );

  }

}


查看完整回答
反對 回復(fù) 2021-06-24
  • 2 回答
  • 0 關(guān)注
  • 157 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號