时间戳

首页 > 解决方案 > PureComponent 中的受控输入不会在更改时呈现

reactjs - PureComponent 中的受控输入不会在更改时呈现

问题描述

为什么受控输入更改时 PureComponent 不呈现

更改为 Component 解决了它

import React, { PureComponent } from 'react';

class Contact extends PureComponent {
state = {firstName:''}

 handleInput = ({ target }, name) => {
 const state = this.state;
 state[name] = target.value;
 this.setState(state);
};

render(){
 return (
    <input onChange={e => {
             this.handleInput(e, 'firstName');
           }} 
           value={this.state.firsName} />
  )
 }
}

它应该在打字时呈现新状态，但它没有

标签： reactjs

解决方案

尝试这样做：

import React, { PureComponent } from 'react';

class Contact extends PureComponent {
  state = {firstName:''}
  handleInput = name => ({target}) => this.setState({[name]: target.value})


  render() {
    return (
      <input
        onChange={this.handleInput('firstName')} 
        value={this.state.firsName} />
    )
  }
}

您遇到的主要问题是您直接改变了状态对象，您所做的就像这样做：this.state.someProp = 'foo'; this.setState(this.state);，这很糟糕。你永远不应该直接改变state.

我正在做的另一件事是我已经将该handleInput方法转换为高阶函数......这不是必需的，但 IMO 使代码更简洁。基本上这意味着this.handleInput('whatever')将返回一个函数，该函数接受“事件”作为其第一个（也是唯一的）参数并更新whatever状态的属性。

推荐阅读