Question

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

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

这意味着，仅具有1个输入标签的任何组件都将被迫成为有状态的组件，而不是无状态的-仅仅是由于react的工作方式以及在用户键入时更新输入标签的原因。

还有其他选择吗？

尽管我使用的钩子更干净，并且允许我通过使用“ 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>
    );
  }
}

这些使用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;

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

2 个答案: