更改值后 React 组件不更新

Question

在 ReactJS 中，我正在编写一个无状态组件；
因为我读过避免不必要的状态是最佳实践。

该组件表示一个输入框，当输入框包含一个值时执行一个函数。

    export const InputField = (props) => {
      
      const InputFieldContentsChanged = (event) => {
        props.onChange(event.target.value);
      };

      return (
        <div data-component="input-field"
          className={(props.value !== "" ? "value": "")}>
          <input type={props.type} value={props.value} onChange={InputFieldContentsChanged} />
          <span className="bar"></span>
          <label>{props.label}</label>
        </div>
      );
    };

    InputField.PropTypes = {
      type: PropTypes.oneOf([ "text", "password" ]).isRequired,
      label: PropTypes.string.isRequired,
      value: PropTypes.string,
      onChange: PropTypes.func.isRequired
    }

现在，我创建了另一个组件，它只是一个示例来测试上面的组件。这看起来像下面这样：

    export const SampleComponent = (props) => {
      
      let componentUsername = "";
      
      const onUsernameChanged = (username) => {
        componentUsername = username;
      };
      
      return (
        <InputField type="text" label="Username" value={componentUsername} onChange={onUsernameChanged} />
      );
    };

因此，我将 value 绑定到组件中的自定义变量，该变量会在输入字段的内容发生变化时发生变化。

输入字段组件不使用新用户名更新自身是怎么回事？

亲切的问候，

Answer 1

I'm writing a stateless React component since it's best practice to avoid state when not needed.

在您的代码中，您尝试使用自己的 "state" 类型，它只是一个变量 (componentUsername)。但由于它不是 React 状态，组件不会在变量更改时重新渲染。 React 根本不知道更改。

因此，要么使用通常的 setState 而不是重新分配您自己的 "state" 变量，要么将逻辑放在父组件中并将 componentUsername 传递给 SampleComponent 通过道具：

const SampleComponent = props => (
  <input type="text" onChange={props.onChange} value={props.value} />
);

class ParentComponent extends React.Component {
  constructor() {
    super();
    this.state = { value: '' };
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(e) {
    console.log(e.target.value);
    this.setState({ value: e.target.value });
  }

  render() {
    return (
      <SampleComponent
        value={this.state.value}
        onChange={this.handleInputChange}
      />
    );
  }
}

ReactDOM.render(<ParentComponent />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 2

功能组件的想法是不对状态或道具执行任何更改。

由于没有触发器来重新呈现您的组件，因此您不会看到任何变化。

将此 React.Function 更改为 React.Component。

const InputField = (props) => {  
  const InputFieldContentsChanged = (event) => {
    console.log(event.target.value);
    props.onChange(event.target.value);
  };

  return (
    <div data-component="input-field"
      className={(props.value !== "" ? "value": "")}>
      <input type={props.type} value={props.value} onChange={InputFieldContentsChanged} />
      <span className="bar"></span>
      <label>{props.label}</label>
    </div>
  );
};

class SampleComponent extends React.Component {
  constructor() {
    super();
    this.state = { componentUsername : ""};
  }
  
  onUsernameChanged = (username) => {
    console.log(username);
    this.setState({componentUsername: username});
  }
  
  render() {
    return (
      <InputField type="text" label="Username" value={this.state.componentUsername} onChange={this.onUsernameChanged} />
    );
  }
};

ReactDOM.render(<SampleComponent/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

更改值后 React 组件不更新

React Component Not Updating After Changing A Value

reactjs

react-hooks

react-state

react-functional-component

react-class-based-component