Question

如果我创建这样的组件：

const MyInput = ({username})=>{
        return (
         <div>
            <input type="text" value={username}/>
         </div>
        );
};

输入输入时不会发生任何事情，因为react需要调用setState()来更新它。

所以我要做的是添加一个onChange方法来处理它：

handleOnchange(e){
    e.preventDefault();
        let name=e.target.value;
  this.setState({username:name});
}

但是我认为必须手动处理每个onChange太多样板了，这是保存价值的更好方法吗？可以使用ref完成吗？

Fiddle Link

Answer 1

是，您需要调用setState以便在输入上更新值。

请参阅此处以获取一个好例子：https://facebook.github.io/react/docs/forms.html

在这里复制：

getInitialState: function() {
    return {value: 'Hello!'};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function() {
    return (
      <input
        type="text"
        value={this.state.value}
        onChange={this.handleChange}
      />
    );
  }

Answer 2

此问题的解决方案在javascript和implemented by lodash中很常见。在尝试更新之前，请先看看使用debouncing等待用户停止输入文本。 Here is an analogy of how it works from someone more eloquent than me：

将其视为“将多个事件组合在一起”。想象一下，你走了回家，进入电梯，门正在关闭......突然间你的邻居出现在大厅里，试图跳上电梯。是有礼貌！为他打开门：你正在为电梯辩护出发。考虑到同样的情况可以再次发生第三个人，等等......可能会推迟几个人的离职分钟。

要做反应，你会导入lodash并将onChange设置为_.debounce(function(), delay)，其中function（）在给定的延迟后将设置为State。

This demo很好地演示了debounce如何反应（只需打开控制台并在键入时观察）。

如果您想了解去抖功能的最佳做法，请阅读this SO post中的答案。

Ps：你也可以尝试限制，但我认为对你的特定用例更有利于去抖动。这个关于去抖的类比的帖子也有一个关于限制的帖子。要使用它，您可以在示例

中将_.debounce(function, int)替换为_.throttle(function, int)

Answer 3

您可以重视反应链接以实现双向数据绑定

class Something extends React.Component {
    state = {
        email: ''
    }

    emailValueLink = (value) => {
        return {
            value: this.state.email,
            requestChange: this.handleEmailChange
        };
    }

    handleEmailChange(newEmail) {
        this.setState({email: newEmail});
    }

    render() {
        <input type="email" valueLink={this.emailValueLink()} />
    }
}

您可以将emailValuelink传递给要绑定的状态键

Answer 4

React就是将代码拆分为组件。因此，为了防止重新输入此样板代码，您可以创建一个组件并将其重用于所有表单元素。或者，就像其他人所说的那样，你可以采取别人的形式或数据绑定组件并重用它们。

我是否使用setState或ref更新？

4 个答案: