Javascript 在ReactJs中的textarea元素内创建编号列表

我试图创建一个文本区域元素，在加载时它应该显示一个“1”。然后用户可以键入一个句子并点击return。返回时，应在下一行中显示“2.”。当用户在没有文本的行上单击backspace时，应该删除该数字并将焦点返回到上一个数字点。为了说明这一点：用户在第“2”行上。->他们按backspace键删除“2”。项目符号。->将它们返回到第“1”行的最后一个字符

到目前为止，我已经了解了很多：

const React = require('react');

const TextArea = React.createClass({

  getInitialState: function() {
    return {
      textAreaVal: '1. '
    };
  },

  editTextArea: function(value) {
    this.setState({
      textAreaVal: value
    });
  },

  render: function() {

    return (
      <div className={"container"}>
        <textarea autoFocus className={"proposal-textarea"} wrap="hard" defaultValue ={this.state.textAreaVal}
          onChange={this.editTextArea} />
      </div>
    );
  },
});

module.exports = TextArea;

const React=require（'React'）；
const TextArea=React.createClass({
getInitialState:函数（）{
返回{
textAreaVal:'1'
};
},
editTextArea:函数（值）{
这是我的国家({
textAreaVal:value
});
},
render:function（）{
返回(
);
},
});
module.exports=文本区域；

---

有没有人对我实现这一目标的最佳方式有什么想法？

你要找的是Reacts事件

与设置

onChange

相同，为

onKeyDown

设置一个函数，该函数发送到

this.handleKeyDown（事件）

。在该函数中，测试

event.charCode

以确定按下了哪个键（enter应为

13

，backspace应为

8

），然后根据需要应用必要的操作

编辑：将我的评论移动到回答栏

要处理递增的数字，只需添加一个辅助状态元素，

lineNumber

。开始时将其初始化为

1

。每当您检测到回车键时，递增

lineNumber

并将

“\n”+this.state.lineNumber+”

附加到

文本AreaVal

好吧，看看这个

const{Component，PropTypes}=React；
类NumberedTextArea扩展组件{
构造函数（）{
超级（）；
this.\u onKeyDown=this.\u onKeyDown.bind（this）；
此.state={
柜台:2,，
案文：`1`
}
}
_onKeyDown（e）{
console.log（例如keyCode）；
如果（如keyCode===13）{
console.log（this.refs.text.value）；
this.refs.text.value=`${this.refs.text.value}\n${this.state.counter++}.`；
e、 预防默认值（）；
e、 停止传播（）；
}
}
render（）{
常量样式={
身高：300，
宽度：200
};
返回(
{this.state.text}
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

const { Component, PropTypes } =  React;

class NumberedTextArea extends Component {
    constructor() {
    super();
        this._onKeyDown = this._onKeyDown.bind(this);
    this.state = {
        counter: 2,
      text: `1. `
    }
  }
  _onKeyDown(e) {
    console.log(e.keyCode);
    if (e.keyCode ===13) {
      console.log(this.refs.text.value);
      this.refs.text.value = `${this.refs.text.value}\n${this.state.counter++}. `;
      e.preventDefault();
      e.stopPropagation();
    }
  }
  render() {
    const style = {
        height: 300,
      width: 200
    };

    return (
      <textarea ref="text" onKeyDown={this._onKeyDown} style={style}>
        {this.state.text}
      </textarea>
    );
  }
}


ReactDOM.render(
  <NumberedTextArea />,
  document.getElementById('root')
);