0

React を初めて使用し、Textfield に変更を加えて状態を更新しようとして問題が発生しました。初期状態が useState で設定されている機能コンポーネントを使用する。

私は単純なものが欠けていると確信しています...しかし、最終的にあきらめて助けを求めています。

機能コンポーネントの完全なコードは次のとおりです。

import React, { useState } from 'react';
import Step1 from '../Element/FormStep1';

const NewForm = () => {

  let [object, setObject] = useState({
    property: {
      entry: 'string'
    }
  });

  function handleChange(event) {
    const {name, value} = event.target;
    setObject({
      ...object,
      [name]: value
    })
    console.log(object)
  };

  return (      
    <form>     
        <Step1 
          handleChange={handleChange}
          object={object}
        />                        
    </form>
  );
}

export default NewForm

フォーム コンポーネントの場合:

import React from 'react';
import TextField from '@material-ui/core/TextField';
import t from 'typy'

export default function Step1(props) {

  return(
    <React.Fragment>
      <TextField
        name={t(props.object, 'property.entry').safeObject}
        type='text'
        onChange={props.handleChange}
      />
    </React.Fragment>
  );
}

handleChange 関数が実行されると、ターゲット プロパティを置き換える代わりに、元の値を名前として持つ新しいプロパティが作成されます。

object {
  property: {
    entry: 'string'
  },
  string: value //Text input
}

意図は、値「文字列」をテキスト入力に置き換えることです。

 object {
   property: {
     entry: 'value' //Text input 
   }
 }
4

3 に答える 3

0

オブジェクトは次のレンダリングで変更されます。

function handleChange(event) {
    const {name, value} = event.target;
    const newObject = {
      ...object,
      [name]: value
    } 
    setObject(newObject)
    console.log('newObject', newObject)
    console.log('currentObject', object)
  };

newObject != オブジェクト

于 2020-10-26T15:30:14.213 に答える
0

それで、私は少し寝て、さらにオンラインで調査した後、なんとかこれを理解することができました. lodash の set メソッドを使用するのが適切でした。そのため、Textfield の name プロパティを少し変更する必要がありました。

<TextField
  name='property.value'
  type='text'
  onChange={props.handleChange}
/>

関数コンポーネント ファイルにセットをインポートした後、import { set } from 'lodash';次のように handleChange 関数を修正できます。

function handleChange(event) {
  const {name, value} = event.target;
  set(object, name, value)
  console.log(object) // to see that it worked in the console. 
}

これは現在、意図したとおりに機能しています (数時間のフラストレーションの後)

注...実際に答えを見つけた場所は次のとおりです。

https://levelup.gitconnected.com/handling-complex-form-state-using-react-hooks-76ee7bc937

于 2020-02-12T03:27:12.583 に答える