使用无状态的输入标签来响应表示（无状态）组件吗？

Question

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

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

这意味着，仅具有1个输入标签的任何组件都将被迫成为有状态组件，而不是无状态组件-仅仅是因为反应方式起作用，并且在用户键入内容时更新了输入标签。

是否有其他选择？

尽管我使用的钩子更干净，并且允许我通过使用“ useState”使用功能组件-它仍将是有状态的。

现在出现了钩子-我们是说所有功能组件都可以保持状态吗？似乎不正确。

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

当然，我可以做的是通过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>
    );
  }
}

这些使用引用获取输入的当前值，而不是为其保持状态。

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;