React textarea 意外失去焦点

Question

我使用 Bootstrap 为 Accordion 中的 Card 创建了 Row 和 Col 组件 - 简单，而不是 React.Bootstrap 或其他任何东西。 Row 和 Col 只是显示他们的孩子，卡片只是有更多的道具，也只是显示孩子。像这样：

class Col extends React.Component {render () {return (
      <div  className='col' id={'col_'+this.props.colid} key={shortid.generate()}>
        {this.props.children}
      </div>)}}

class Row extends React.Component {render () { return (
        <div  className='row' id={'row_'+this.props.rowid} key={shortid.generate()}>
          {this.props.children}
        </div>)}}

然后我想插入一个 textarea，它具有对文本进行一些更改的功能，我在 textarea 下方的 div 中显示这些更改。另外我还有一个按钮，可以根据 clipboard.js 将文本复制到缓冲区

第一个版本的渲染函数工作得很好，但它没有给我所需的设计，所以我想出了第二个版本，基于 Row 和 Col 组件，如上所述。

内容主要是没有区别的——相同的textarea、checkbox、button和div。不同的是布局。第一个版本根本没有布局，第二个我尽力了:)

所以：

  render () { return (<React.Fragment>
        <textarea id='xng0' onChange={this.handleChange} ref={this.xng0ref} />&nbsp;
        <CopyButton target="st0" message="Copy text" /> <br />
        <input type='checkbox' onChange={this.toggleTranslit} 
               defaultChecked={this.state.tranParam} /><span>Translit?</span><br />
        <div id='st0' border='1' ref={this.st0ref} >
          {this.state.st0value}
        </div></React.Fragment>)}

第二个版本：

  render () {return ( <React.Fragment><Row><Col>
            <textarea id='xng0' onChange={this.handleChange} ref={this.xng0ref} />&nbsp;
              </Col><Col><Row><Col>
                <CopyButton target="st0" message="Copy text" />
              </Col></Row>
            <Row><Col>
                <input  type='checkbox' onChange={this.toggleTranslit} 
                        defaultChecked={this.state.tranParam}
                    /><span>Translit?</span>
              </Col></Row>
          </Col>
        </Row>
        <Row>
          <div id='st0' border='1' ref={this.st0ref}>
            {this.state.st0value}
          </div></Row></React.Fragment>)}

我的问题是：虽然第一个 render() 版本将焦点保持在 textarea 中，但当我键入时，第二个版本在输入第一个字母后将焦点从 textarea 中抛出并清除 textarea。那就是我无法输入一些长文本 - 我只收到一个字母。

我错过了什么？为什么会发生这种情况以及如何使焦点稳定？

Answer 1

正如您已经在 cmets 中得到提示一样，Col 和 Row 组件上的每个渲染都有唯一的键，因为 key={shortid.generate()}。

在textarea 中写入一个字符后，您很可能会更改状态，然后重新渲染并在当前textarea 的位置上出现一个新字符，自然没有焦点。

我建议您仔细阅读为什么在 React 中创建 keys。链接https://reactjs.org/docs/lists-and-keys.html#keys。

我必须马上说，它们是为了识别列表项而创建的，当您在每次渲染时生成唯一的 keys 时，这完全违反了。

Answer 2

请将“值”属性添加到您的文本区域