包装一个组件意味着它失去了对重新渲染的关注

Question

我有一个很长的反应形式。之前，它有一堆这样定义的组件：

<input
  type='text'
  value={this.state.form.nameOfFormField}
  onChange={this.updateForm('nameOfFormField')} />

其中updateForm是(field) => (e) => {}形式的函数，方便代码复用。

我想让它更易于维护，所以我创建了一个组件，SpecialInput，它的定义如下：

const SpecialInputBuilder = (form, onChange) => ({ field, ..props }) => (
  <input
    type='text'
    value={form[field]}
    onChange={onChange(field)}
    {...props} />
)

现在，我可以像这样在渲染期间定义输入：

const SpecialInput = SpecialInputBuilder(this.state.form, this.updateForm)

并像这样在组件中使用它：

<SpecialInput field='nameOfFormField' />

显然，这要简洁得多。但这也意味着每次输入输入字段时（即调用updateForm 时）输入字段都会失去焦点，因为每次调用render 函数时都会定义SpecialInput。为每个元素定义一个key 似乎并不能缓解这个问题。如何在仍然使用这个更简单的组件的同时解决这个问题？有没有中间地带？

Answer 1

主要问题是您的 onChange 调用在渲染后立即执行，而不是在输入更改时对要调用的函数的引用。

// this executes immediately
onChange={onChange(field)}

// this is a reference to the function with a prop prepended
onChange={onChange.bind(this,field)}

Answer 2

我有类似的方法，但最终将其更改为这个；

(1) Input typer 子组件：

import React, { Component } from 'react';

class FreeTextField extends Component {
  inputValueFn(e) {
    this.props.userInput(this.props.responseObject, e.target.value);
  }
  render() {
    return (
      <div className="input-group">
            <label>{this.props.buttonText ? this.props.buttonText : "Firstname"}</label>
            <input type={this.props.type} placeholder="" className="form-control" defaultValue={this.props.defaultValue} onChange={this.inputValueFn.bind(this)} />
      </div>
    );
  }
}

export default FreeTextField;

(2) 在父组件中你可以通过 props 指定所有相关的子属性

// import
import FreeTextField from './pathTo/FreeTextField';

// Initial state
this.state = {
responseObject: {}
}

// onChange it updates the responseObject
    userInput(fieldKey,value) {
        let responseObject = this.state.responseObject;
        responseObject[fieldKey] = value;
        this.setState({responseObject:responseObject});
    }

// component render()
<FreeTextField 
buttonText="First Name" 
type="text" 
formObjectKey="first_name" 
userInput{this.userInput.bind(this)} />

Answer 3

为什么不把你的输入构建器改成一个 React 组件呢？

const SpecialInput = (props) => {
  return (
    <input
      value={props.form[props.field]}
      {...props}
      type={props.type || 'text'}
      onChange={() => props.onChange(props.field)} 
    />
  )
}

并以同样的方式使用它。

<SpecialInput field='nameOfFormField' onChange={this.updateForm} form={this.state.form} />