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行输入的textarea。当我在textarea中输入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()，如下面的runnable片段所示：

＆＃13;

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

＆＃13;

.textarea {
  height: 150px
}

＆＃13;

<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" />

＆＃13;

修改
这是您的代码，包含这些更改。

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} /> ...... ....... });

`onChange`和`onKeyDown`在做出反应

2 个答案: