Question

我是React的新手，我对如何实现这一目标感到困惑

我有一个返回组件的简单函数

renderCustomButtonText(style) {
    return (
    <span> 
     <input 
      value={this.state.contact}
      placeholder="Custom Button Text"
      />
    </span>
    );
  }

从状态接收输入值。第一次加载页面时，它会从数据库中获取此值，因此可以，但是再次更新状态时，它会再次更改。

因此，基本上，我想将{this.state.contact}存储在某个地方，以便获得其初始值。而且没有得到更新的存储值，只有第一次加载的初始值。

我不想将Redux用于如此简单的用例。有任何想法吗？

Answer 1

您不能对需要基于类的组件的功能组件使用状态，而对于只能用于渲染道具的功能组件，则不能使用状态。

当您需要与状态或组件生命周期挂钩进行交互时，您需要使用基于类的组件。

Answer 2

只要您使用this.setState，React就会更新其组件。如果您不想重新渲染组件，建议将信息设置为this实例而不是this.state。

例如

this.contact = contact;

但是，由于您正在使用输入的值属性，因此每次用户输入时都需要对其进行更新。您可以使用setState在componentWillMount方法中设置状态。

this.setState({ contact: '...' });

然后还通过向输入组件添加onInput事件来更新用户输入时的状态。

<input
  value={this.state.contact}
  onInput={e => this.setState({ contact: e.target.value })}
/>

反应-仅使用状态值一次

2 个答案: