反应文本区域意外失去焦点

Question

我已经使用Bootstrap在Accordion中为Card创建了Row和Col组件-很简单，不是React.Bootstrap或其他任何东西。 Row和Col仅显示他们的孩子，Card包含更多道具，还显示孩子。像这样：

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>)}}

然后，我想插入一个文本区域，该文本区域提供了对文本进行一些更改的功能，我将这些更改显示在文本区域下方的div中。另外我还有一个按钮，可根据剪贴板将文本复制到缓冲区。

第一个版本的render函数工作正常，但是它没有提供所需的设计，因此我根据上述Row和Col组件提出了第二个版本。

内容主要相同-相同的文本区域，复选框，按钮和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（）版本将焦点保持在文本区域中，但是当我键入时，第二个版本在键入第一个字母并清除文本区域后将焦点从文本区域中移开。那就是我无法输入一些长文本-我只能收到一个字母。

我想念什么？为什么会发生这种情况，以及如何使焦点稳定？

我已经使用Bootstrap在Accordion中为Card创建了Row和Col组件-很简单，不是React.Bootstrap或其他任何东西。 Row和Col仅显示他们的孩子，卡片上有更多道具，而且...

Answer 1

由于在注释中已经提示您，Col和Row组件上的每个渲染都有唯一的键，因为key={shortid.generate()}。

Answer 2

请在您的文本区域添加'value'属性