0

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

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

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

有替代方案吗？

虽然我使用的是更简洁的钩子，并且允许我通过使用“useState”来使用功能组件 - 它仍然是有状态的。

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

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

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

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

有任何想法吗 ？

4

2 回答 2

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 来获取 input 的当前值，而不是为其维护 aa 状态。

于 2019-12-23T07:50:43.973 回答
1

您应该将回调传递给它，而不是在组件中管理该输入，例如。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;
于 2019-12-23T08:00:28.023 回答