Question

我有一个带有一些文本的文本框，在执行ajax调用后会得到一些文本。每当用户键入一些文本时，我都会将值分配给状态。这将呈现当前文本区域，并且光标移至该行的前面。

如何避免重新渲染。我应该如何保持状态。

class Design extends React.Component{

constructor(){
    super();
}


handleMessageChange(e){
    let msg = e.target.innerText;
    this.props.dispatch({type:'design_changed',designObj:{property:'message',value:msg}})
}
 render(){
    return  (

      <React.Fragment>

          <Panel header="Message" key="2">
            <div>
              <div className="userscoop-content-editable-cls" contentEditable="true" onKeyUp={this.handleMessageChange.bind(this)}>{this.props.message}</div>
            </div>
          </Panel>

      </React.Fragment>
 }

function mapStateToProps(state){
   let settings = state.HelloBar.template.settings;
   return {
      background_color: settings.background_color,
      action_color:settings.action_color,
      message:settings.message,
      button_color:settings.button_color,
      input_placeholder:settings.input_placeholder,
      goal:state.HelloBar.goal
    } 
}

Answer 1

如果您使用shouldComponentUpdate生命周期方法并比较新旧状态，则可以取消渲染。

或者，您可以先尝试使用PureComponent并查看是否可行。

如果仍然有问题，可以考虑考虑保存光标状态。 [from here]

Answer 2

您可以使用组件的shouldComponentUpdate()方法来定义在更改一些道具时是否应重新渲染。您可以写信忽略此更改。

Answer 3

如果要处理需要对字段进行连续操作的组件，请尝试Redux-Form。或在您通过传递keyUp或keyDown

触发的每个操作中使用document.addEventListener

如何维持状态

3 个答案: