具有受控输入的无状态React组件

Question

目前，为了使受控输入在Stateless React组件中工作，我将无状态组件包装在Sate完整组件中。

例如，

const InputComponent = (props) => {
  return (
    <input value={props.name} onChange={props.handleChange} />
  );
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'Tekeste'
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({
      name: event.target.value
    });
  }
  render() {
    return (
      <InputComponent name={this.state.name} handleChange={this.handleChange} />
    );
  }
}

我想知道的是一些事情。

1. 这是一个好模式吗？
2. 如果不是，我怎样才能实现我的目标，即在无状态组件内部控制输入。

Answer 1

由于InputComponent接收其值以及从其父级修改它的回调，因此它是没有状态的受控输入。 这是一个非常好的模式，你也可以使用这样的ES7类属性使它更简单：

class App extends React.Component {
  state = {
    name: 'Tekeste'
  };

  handleChange = (event) => {
    this.setState({
      name: event.target.value
    });
  }

  render() {
    return (
      <InputComponent name={this.state.name} handleChange={this.handleChange} />
    );
  }
}

如果你正在使用create-react-app ，它已经开箱即用了。

此外，您可以将受控输入的道具重命名为value和onChange因为它们更常规使用。

Answer 2

建立@ frontsideair的答案，你可以使用https://github.com/NullVoxPopuli/react-state-helpers做以下的事情

import React, { Component } from 'react';
import stateWrapper from 'react-state-helpers';

class App extends Component {
  render() {
    const { 
      mut, 
      values: { name } 
    } = this.props;

    return <InputComponent name={name} handleChange={mut('name')} />;
  }
}

export default stateWrapper(App)