Шаблон проектирования для реализации хуков в форме
Исходя из классового фона, компоненты формы были разработаны примерно так:
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);
}
Чтобы углубиться в рамки этого потока, какой подход будет наиболее любезным для обработки нескольких похожих элементов (например, входных данных) в реагирующих хуках.
Ответы 1
Если вы хотите воспроизвести поведение «поверхностного слияния» this.setState с хуками, вы можете использовать один useState с функция обновления. Это можно выразить весьма лаконично, используя синтаксис распространения объекта:
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 — я обнаружил, что он лучше справляется с обработкой сложных обновлений состояния.