Question

我正在尝试练习React表单，但似乎无法解决此错误。我已经开发了一种多输入表单，并且需要该值来更新父级的状态。当我开始在输入字段中键入内容时，它会触发Switch大小写默认值。我不确定是否输入了错误的'handleChange'函数，或者是否应该为state.data使用单独的状态。任何建议将不胜感激

import React, { useState } from 'react';
import Form from './Form';
import Results from './Results';

function App() {
    const [state, setState] = useState({
        data: 1,
        Name: '',
        Email: '',
        City: ''
    });

    const nextStep = () => {
        setState({
            data: state.data + 1
        });
  };

  const handleChange = e => {
        let field = e.target.name;
        let val = e.target.value;
        setState({ [field]: val });
    };

    switch (state.data) {
        case 1:
            return (
                <div className='App-container'>
                    <Form
                        button='Next'
                        nextStep={nextStep}
                        name='Name'
                        state={state.name}
                        handleChange={handleChange}
                    />
                </div>
            );
        case 2:
            return (
                <div className='App-container'>
                    <Form
                        button='Next'
                        nextStep={nextStep}
                        name='Email'
                        state={state.email}
                        handleChange={handleChange}
                    />
                </div>
            );
        case 3:
            return (
                <div className='App-container'>
                    <Form
                        button='Submit'
                        nextStep={nextStep}
                        name='City'
                        state={state.city}
                        handleChange={handleChange}
                    />
                </div>
            );
        case 4:
            return (
                <div className='App-container'>
                    <Results data={state} />
                </div>
            );
        default:
            return 'Error';
    }
}

export default App;

import React from 'react';

const Form = ({ button, nextStep, name, state, handleChange }) => {
    const handleSubmit = e => {
        e.preventDefault();
        nextStep();
    };

    return (
        <div className='Form-container'>
            <form onSubmit={handleSubmit}>
                <input
                    type='text'
                    placeholder={name}
                    name={name}
                    value={state}
                    onChange={handleChange}
                />
                <input type='submit' value={button} />
            </form>
        </div>
    );
};

export default Form;


import React from 'react';

const Results = ({ data }) => {
    return (
        <div>
            <h1>Info</h1>
            <p>{data.name}</p>
            <p>{data.email}</p>
            <p>{data.city}</p>
        </div>
    );
};

export default Results;

Answer 1

我建议对表单输入使用自定义钩子，如下所示

//useForm.js

const useForm = defaultValues => {
  const [values, setValues] = useState(defaultValues);
  const handleChange = ({ name, value }) => {
    setValues(prevState => ({ ...values, [name]: value }));
  };
  const reset = () => {
    setValues(null);
  };
  return [values, handleChange, reset];
};

内部组件

 const [formValues, handleChange, resetForm] = useForm();

 return (
    <>
     <Input
       value={formValues.name}
        onChange: str => handleChange({ name: "name", value: str })
      />

     <Input
       value={formValues.email}
        onChange: str => handleChange({ name: "email", value: str })
      />
    </>
  )

Answer 2

您在handleChange上丢失了状态，但希望它与当前状态合并，但这不是useState的工作原理 in contradiction to this.setState在类组件中的作用：< / p>

// Results new state: { data };
setState({ data: state.data + 1 });

// Instead update the copy of the state.
// Results new state: { data, Name, Email, City }
setState({ ...state, data: state.data + 1 });

检查useState note in docs：

注意

与在类组件中找到的setState方法不同，useState可以不会自动合并更新对象。您可以复制此通过将功能更新程序形式与对象传播相结合来实现行为语法。

另一个选项是useReducer，这更适合管理包含多个状态对象子值。

Answer 3

您需要保留旧状态

  const handleChange = e => {
        let field = e.target.name;
        let val = e.target.value;
        setState({ ...state, [field]: val });
    };

这是setState({ ...state, [field]: val });

React Form不更新状态onChange

3 个答案: