Question

我正在尝试创建一个文本区域元素，在加载时它应该显示一个＆＃34; 1。＆＃34 ;.然后，用户可以键入一个句子并点击返回。返回时，它应该呈现＆＃34; 2。＆＃34;在下一行。当用户在没有文本并单击退格的行上时，应删除该编号并将焦点返回到上一个编号点。为了说明这一点：用户在线＆＃34; 2。＆＃34; - ＆GT;他们按退格键移除＆＃34; 2。＆＃34;要点。 - ＆GT;将它们返回到第＆＃34; 1行的最后一个字符。＆＃34;

到目前为止，我已经弄清楚了这一点：

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;

有没有人对我能做到这一点的最好方法有任何想法？

Answer 1

您正在寻找的是Reacts onKeyDown事件。

设置onChange的方式相同，设置发送到onKeyDown的{{1}}函数。在该函数中，测试this.handleKeyDown(event)以确定按下了哪个键（输入应为event.charCode，退格应为13），然后根据需要应用必要的操作。

编辑：将我的评论移至答案区;

要处理递增的数字，只需添加辅助状态元素8即可。在开始时将其初始化为lineNumber。每当您检测到按键输入时，请递增1并将lineNumber附加到"\n" + this.state.lineNumber + ". "。

Answer 2

好吧，看看这个fiddle

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')
);

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

2 个答案: