Question

我正在将表单字段设为“反应材料用户界面”。我发现一些很奇怪的东西。首先，在index.js文件的onchange中更新updatedValue onChange函数由InputField（.js）组件提供。然后，InputField组件使用从父级收到的onChange添加/更新event.target.value。

const onChange = updatedValue => {
    console.log('updatedValue',updatedValue)
    setField({
      ...field,
      ...updatedValue
    });
    console.log("1", field)
  };

如果您查看上面的代码和图片，{Member Name：“ 1”}将出现在updatedValue中。（console.log）但是，如果您查看{console.log（'field'，field）}底部，它将更新事件。为什么会这样？

index.js

import React, {useState} from 'react';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';

import InputOption from './InputOption.js';
import InputField from './InputField';
import InputPassword from './InputPassword.js';
import InputRadio from './InputRadio';
import InputPhone from './InputPhone';

const data = [
  {
    label: 'Member Type',
    types: [
      {
        value: 'public',
        label: 'Public member',
      },
      {
        value: 'private',
        label: 'Private member',
      },
      {
        value: 'master',
        label: 'Master member',
      },
    ]
  },
  {
    label: 'Member Level',
    types: [
      {
        value: '1',
        label: 'Level 1',
      },
      {
        value: '2',
        label: 'Level 2',
      },
      {
        value: '3',
        label: 'Level 3',
      },
      {
        value: '4',
        label: 'Level 4',
      },
      {
        value: '5',
        label: 'Level 5',
      },
    ]
  },
  {
    label: 'Member os',
    types: [
      {
        value: 'Android',
        label: 'Android',
      },
      {
        value: 'Ubuntu',
        label: 'Ubuntu',
      },
      {
        value: 'Windows',
        label: 'Windows',
      },
      {
        value: 'Mac',
        label: 'Mac',
      },
      {
        value: 'Redhat',
        label: 'Redhat',
      },
    ]
  }
]

export default function Member() {
  const [field, setField] = useState({});

  const onChange = updatedValue => {
    console.log('updatedValue',updatedValue)
    setField({
      ...field,
      ...updatedValue
    });
    console.log("1", field)
  };

  return (
    <React.Fragment>
      <h4>Member register</h4>
      <form onChange={field => onChange(field)} noValidate autoComplete="off">
      {
        data.map((option, i) =>
          <InputOption 
            key={i}
            types={option.types}
            label={option.label}
            onChange={onChange}
          />
        )
      }
      <TextField id="filled-basic" label="Member Id" variant="filled" />
      <Button variant="outlined">✔ Duplicate Check</Button>
      <br/>
      <InputPassword label="Password"/>
      <br/>
      <InputPassword label="Password Reconfirm"/>
      <br/>
      <InputField id="Member Name" label="Member Name" field={field} onChange={onChange}/>
      <br/>
      <TextField id="standard-basic" label="Birthday" />
      <br/>
      <InputRadio/>
      <br/>
      <InputPhone/>
      </form>
      <br/>
      {/* <p>
        {JSON.stringify(field, null)}
      </p>
       */}
       {console.log('field', field)}
    </React.Fragment>
  );
}

InputField.js

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

export default function InputField({label, onChange, field}) {
    const optionChange = event => {
        console.log(label);
        onChange({
          [label]: event.target.value
        });
      };

    return (
        <TextField 
            id={`filled-basic-${label}`}
            label={label} 
            value={field.label}
            onChange={optionChange}
        />
    );
}

反应onChange event.target.value对象更新事件对象

0 个答案: