使用没有状态的输入标签来反应表示(无状态)组件?

时间:2019-12-23 07:47:41

标签: reactjs react-hooks react-functional-component

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

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

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

还有其他选择吗?

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

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

还是仅仅是由于反应的方式,任何具有输入标签的组件都会自动成为有状态组件?

当然,我可以做的是通过props传递默认值,然后将这些值传递给更高的组件(我真正的有状态组件)-但这似乎还很漫长。

我希望对实现具有输入标签的无状态组件的方式应该有所了解-还是我们应该始终将值传递回父组件,或其在组件具有输入标记,我们将存储最小状态(例如,在钩子中使用useState)

有什么想法吗?

2 个答案:

答案 0 :(得分:0)

使用不受控制的组件

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获取输入的当前值,而不是为其保持状态。

答案 1 :(得分:0)

您应该在其上传递回调,而不是在组件中管理该输入。一个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;