反應中的onChange和onKeyDown

Question

const Table = React.createClass({
.............
.............         
            handleChange: function(e) {
                switch (e.target.name) {
                case 'textarea':
                    if (this.state.newContent && this.state.newContent.trim().split('\n').length < 7) {
                        this.setState({newContent: e.target.value}); break;
                    } else {
                        break;
                    }
                default:
                    console.error('Error in handleChange()'); break;
                }
            },

            onKeyDown: function(e) {
                if (e.keyCode === 8 || e.keyCode === 46) {
                    this.setState({newContent: e.target.value});
                }
            },



    .....
    <textarea type="text"
                        name="textarea"
                        value={this.state.newContent}
                        placeholder="Enter content here..."
                        onChange={this.handleChange}
                        onKeyDown={this.onKeyDown} />
    ......
    .......
});

我想擁有一個僅接受6行輸入的文本區域。 當我在文本區域中輸入6行，然后按Backspace或Delete按鈕時，不會觸發setState ，即不會刪除任何字符。 我應該如何更改handleChange和onKeyDown函數，以便可以在textarea中最多輸入6行，並且也可以從中刪除字符？ 謝謝！

Answer 1

您是否綁定了handleChange和onKeyDown函數？ 如果不是，則應嘗試在構造函數中添加以下行：

this.handleChange = this.handleChange.bind(this);
this.onKeyDown= this.onKeyDown.bind(this);

希望能有所幫助！

Answer 2

我設法僅使用handleChange函數來限制它。 而不是檢查this.state.newContent您應該檢查e.target.value的新行數（並刪除trim() ），如下面的可運行代碼片段所示：

 class TextArea extends React.Component { constructor(props) { super(props) this.state = { newContent: '1\\n2\\n3\\n4\\n5\\n6' }; this.handleChange = this.handleChange.bind(this); } handleChange(e) { if (!e.target.value || e.target.value.split('\\n').length < 7 ) { this.setState({ newContent: e.target.value }); } } render() { return <textarea type="text" className="textarea" name="textarea" value={this.state.newContent} placeholder="Enter content here..." onChange={this.handleChange} /> } } ReactDOM.render(<TextArea /> , document.getElementById('root')); 

 .textarea { height: 150px } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script> <div id="root" /> 

編輯
這是您所做的更改的代碼。

const Table = React.createClass({
  .............
  .............
  handleChange: function(e) {
    switch (e.target.name) {
      case 'textarea':
        if (!e.target.value ||
          e.target.value.split('\n').length < 7
        ) {
          this.setState({
            newContent: e.target.value
          });
        }
        break;
      default:
        console.error('Error in handleChange()');
        break;
    }
  },

  .....         
  <textarea type="text"
    name="textarea"
    value={this.state.newContent}
    placeholder="Enter content here..."
    onChange={this.handleChange} />
  ......
  .......
});