Question

我有一个多选项卡式面板，可以根据所选选项卡的组合来更改文本区域。为了使此面板中的更改能够提供自动更新，我提供了一个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”和“一个”时，我希望文本字段加载默认的“ 1. Ex”字符串，然后当我将选项卡更改为“ Y”和“一个”时，我希望文本字段以加载“ 2. Why”字符串。但是，除非我也更改为“两个”选项卡，否则该文本字段不会更改，该选项卡将卸载<textarea>元素，然后再更改回“一个”选项卡。我应该如何处理通过props表示的默认值和需要onChange处理程序的自动更新的要求？

如果我使用value设置文本字段的文本，它将在状态更改时更新文本，但是它使用户无法更改文本字段。

Answer 1

在您的textarea字段中使用value代替defaultValue。原因：defaultValue仅在最初创建输入时指定值：因此，无法进行更新。

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

1 个答案: