使用没有状态的输入标签来反应表示（无状态）组件？

Question

我正在尝试遵循一个简单的表示模型，即它没有状态。

问题是，如果我使用输入标签或其他表单控件，该组件更新自身的唯一方法是使用状态 - 这是否正确？

这意味着，任何只有 1 个输入标签的组件都将被强制成为有状态组件而不是无状态组件 - 只是因为 React 的工作方式以及在用户输入时更新输入标签。

有替代方案吗？

虽然我使用的钩子更干净，并且允许我通过 "useState" 使用功能组件 - 它仍然是有状态的。

现在出现了钩子 - 我们是说所有功能组件都可以保持状态吗？好像不太对。

或者只是由于 React 的工作方式，任何具有输入标签的组件都会自动成为有状态组件？

当然，我可以做的是通过 props 传递默认值并将值传递给更高的组件（我真正的有状态组件）——但这似乎是一个很长的路要走。

我希望对什么是实现具有输入标签的无状态组件的方法有所了解 - 或者我们是否应该始终将值传回父组件，或者它是一个可以理解的副作用，当一个组件有一个输入标签，我们将存储最小状态（例如，在挂钩中使用 useState）

有什么想法吗？

Answer 1

使用不受控制的组件

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.input = React.createRef();
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.current.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={this.input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

这些使用 refs 获取输入的当前值，而不是为其维护一个状态。

Answer 2

您不应在组件中管理该输入，而应向其传递一个回调，例如。 redux 商店或类似的东西。这样，表单组件就与该输入背后的逻辑分离，并成为一个简单的展示组件：

const Form = callback => {
    const inputRef = React.createRef();

    const handleInput = event => {
        event.preventDefault();
        callback(inputRef.current.value);
    };

    return (
        <form onSubmit={handleInput}>
            <input type="text" ref={inputRef} />
            <button>Submit</button>
        </form>
    );
};

export default Form;

使用没有状态的输入标签来反应表示（无状态）组件？

React presentational (stateless) component using input tags without state?

reactjs

react-hooks

react-functional-component