Question

我正在处理一种表单，其中只要用户与字段交互，就会调用函数onFocus并将该字段的当前内容写入状态。但是，这会导致不需要的地方重新呈现，并且在某些情况下会弄乱表格。

/* -- Core -- */
import React, { useState } from 'react';

/* -- Design -- */
import TextField from '../shared/TextField';

function Users() {
  const [user, setUser] = useState({});
  const [save, setSave] = useState(false);
  const [activeProperty, setActiveProperty] = useState({});

  const handleInputChange = (property) => event => {
    const _user = Object.assign({}, user);
    let forceSave = false;

    switch (property) {
      case ('callerid'):
        _user.callerid = event.target.value;
        break;
      default:
        _user[property] = event.target.value;
    }

    setUser(_user);

    if (forceSave) {
      setSave(true);
    }
  };

  // Handle input
  const onFocus = property => () => {
    if (property !== activeProperty.property) {
      setActiveProperty({ property, original: user[property] });
    }
  };

  const saveUser = useCallback(async () => {
    // Save the user
  }, [activeProperty, user]);

  return (
    <TextField
      required
      id="callerid"
      label="Caller ID"
      onChange={handleInputChange('callerid')}
      value={user.callerid || ''}
      onBlur={saveUser}
      onFocus={onFocus('callerid')}
    />
  );
}

export default Users;

上面的代码是简化的版本，这种形式当然还有更多的形式元素。但是如何确定调用setActiveProperty不会引起重新渲染？

具体发生以下情况。

用户单击一个导致调用onFocus函数的字段
网站将在该州可以找到的字段名称及其原始内容写到另一个州
当用户单击时，将调用onBlur函数
saveUser验证数据，其中一项检查是检查对象中现在的值是否与activeProperty声称的值相比发生了变化
如果验证通过，则对象将被保存，否则将不会发生任何事情

也许有更好的方法来解决这个问题？

不要在useState调用上重新呈现页面

0 个答案: