Question

从类的背景出发，表单组件的设计基于-

class Test extends Component {
    state = {
        name: '',
        //10 more variables
    }

    handleInputChange = (e) => {
        this.setState({
            [e.target.name]: value
        })
    }

    render() {
        return (
            <>
                <input type="text" name="name" onChange={this.handleInputChange} value={this.state.name} />
                {/* 10  more inputs */}
            </>
        )
    }
}

如果状态变量与输入元素的名称具有相同的定义，则handleInputChange可以在所有其他附加输入中重复使用。

现在，我在决定决策时面临的困难是，在挂钩设计模式中，此用例的最佳方法是什么。因此，将这种行为移植到钩子中-

function Test() {
  const [name, setName] = useState('');
  //10 more variables

  handleNameChange(e) {
        setName(e.target.value);
  }

  //similar 10 more functions

  return (
    <>
        <input name="name" onChange={handleNameChange} value={name} />
        {/* 10 more inputs */}
    </>
  );
}

上面给出的代码段最终将需要定义10个函数来分别设置每个变量的值。

可以减少函数声明，但是我认为这会使代码看起来不可读，例如-

handleInputChange(e) {
   const functionName = e.target.name;
   functionName(e.target.value);
}

要深入研究该线程的范围，将是最有礼貌的方法来处理react-hooks中的多个相似元素（例如input）。

Answer 1

如果要复制带有钩子的this.setState的“浅合并”行为，则可以将单个useState与updater function一起使用。使用对象传播语法可以很简洁地表达这一点：

const [state, setState] = useState({ name: '' });

function handleInputChange(e) {   
    setState(prevState => {
        return { ...prevState, [e.target.name]: e.target.value };
    });
}

或者，如果您不想使用尚未标准化的语法，则：

const [state, setState] = useState({ name: '' });

function handleInputChange(e) {   
    setState(prevState => {
        return Object.assign({}, prevState, { [e.target.name]: e.target.value });
    });
}

您可能还想考虑尝试useReducer-我发现在处理复杂的状态更新方面，它往往会更好。

在表单中实现挂钩的设计模式

1 个答案: