reactjs - `defaultValue` 和 `onChange` 防止状态更改更新渲染

问题描述

我有一个多选项卡式面板，它根据所选选项卡的组合更改文本区域。为了使此面板中的更改提供自动更新，我提供了一个onChange侦听器，但这会导致defaultValue设置出现问题，并且不会更改textarea状态更改时的内容。

const props = {
	'x': {
  	'label': {
    	'text': 'Ex'
    }
  },
  'y': {
  	'label': {
    	'text': 'Why'
    }
  }
}

class TodoApp extends React.Component {
	constructor(props) {
  	super(props);
    this.state = {
    	tab: 'x',
      subtab: 'One'
    }
  }
  
  getActiveTab(tab) {
  	if (this.state.tab === tab) return ' active';
    else return '';
  }
  
  getActiveSubTab(subtab) {
  	if (this.state.subtab === subtab) return ' active';
    else return '';
  }
  
  getOneTab() {
  	return(
    	<div className="tab-pane active fade in">
        <textarea cols="16" rows="5" 
          defaultValue={"1. " + props[this.state.tab].label.text} 
          onChange={(e) => {console.log(e)}}></textarea>
      </div>
    );
  }
  
  getContent() {
  	if (this.state.subtab === 'One') {
    	return this.getOneTab();
    } else {
    
    }
  }
  
	render() {
  	return (
    	<div>
    	  <ul className="nav nav-tabs" role="tablist">
    	    <li className={"tabProperties" + this.getActiveTab('x')}>
    	      <a onClick={() => this.setState({tab: 'x'})} role="tab">X</a>
    	    </li>
          <li className={"tabProperties" + this.getActiveTab('y')}>
            <a onClick={() => this.setState({tab: 'y'})} role="tab">Y</a>
          </li>
    	  </ul>
        <div className="tab-content">
          <ul className="tabProperties nav nav-tabs" role="tablist">
            <li className={"tabProperties" + this.getActiveSubTab('One')}>
              <a onClick={() => this.setState({subtab: 'One'})} role="tab">One</a>
            </li>
            <li className={"tabProperties" + this.getActiveSubTab('Two')}>
              <a onClick={() => this.setState({subtab: 'Two'})} role="tab">Two</a>
            </li>
          </ul>
        </div>
        <div className="tab-content">
          {this.getContent()}
        </div>
    	</div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

当活动选项卡为“X”和“One”时，我希望文本字段加载默认的“1.Ex”字符串，然后当我将选项卡更改为“Y”和“One”时，我希望文本字段加载“2. 为什么”字符串。但是，文本字段不会更改，除非我也更改为“Two”选项卡，该选项卡会卸载<textarea>元素，然后更改回“One”选项卡。我应该如何处理通过表示的默认值props和需要自动更新的onChange处理程序的要求？

如果我value用来设置文本字段的文本，它将在状态更改时更新文本，但它会删除用户更改文本字段的能力。

标签： reactjs

reactjs - `defaultValue` 和 `onChange` 防止状态更改更新渲染

问题描述

解决方案

推荐阅读