reactjs - 每次击键时都会重新呈现整个表单

Question

我有一个用于用户注册的复杂表单设置问题是整个表单在每次击键时都会重新呈现

应用结构

我在下面以自上而下的方式给出了我的应用程序的架构

UserRegistration
包含单一事实来源的父组件具有对象形式的状态，它将输入值作为道具传递给其子组件

user:{
  number: '1234',
  firstName: 'Vaibhav',
  lastName: 'Shelke'
}

它的孩子是

<UserDetails
              getUserDetails={(userDetails, errors) => {
                this.setState({
                  userDetails,
                  errors: errors || {},
                  isSubmitable:
                    countLeaves(errors) === 0 && countLeaves(userDetails) > 0
                });
              }}
              values={this.state.userDetails}
              errors={this.state.errors}
            />

UserDetails
可重用组件，包含基本值，如 firstName、lastName、number。该组件从其父组件（即 UserRegistraion）获取 inputValues 以及反映父组件更改的函数

handleInput = (e, name) => {
    const { values, getUserDetails } = this.props;
    const userDetails = { ...values };
    if (e instanceof Date) {
      userDetails[name] = format('yyyy-MM-dd', e); // Date Input
    } else if (e) {
      userDetails[e.target.name] = e.target.value; // Text Input
    }
    getUserDetails(userDetails, validateUser(userDetails));
  };

TextInput
实际更改它的基本输入组件从其父组件获取其值和处理程序，即。UserDetails 作为道具

const {
      label,
      name,
      onInputChange,
      icon,
      intent,
      helperText,
      labelInfo,
      value,
      type
    } = this.props;

    return (
      <FormGroup
        helperText={helperText}
        label={label}
        labelFor="text-input"
        labelInfo={labelInfo || ''}
      >
        <InputGroup
          type={type}
          intent={intent}
          leftIcon={icon}
          id={name}
          name={name}
          placeholder={label}
          onChange={e => onInputChange(e)}
          value={value || ''}
        />
      </FormGroup>
    );

以上所有组件都是基于类的组件

我试过使用 shouldComponentUpdate() 但这仍然不起作用

我已经在问题总结中给出了代码

标签： reactjsformsperformance