Question

我有一个受控制的表格。如果您输入textarea并单击提交按钮，则可以使用。但是，当我在键入时按Enter键时，我还试图让表单提交。以下而不是提交表单重新加载页面。

import React from 'react';

class PostComment extends React.Component {
    constructor(props) {
        super(props);
        this.state = { value: '' };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.keyDown = this.keyDown.bind(this);
    }

    handleChange(e) {
        e.preventDefault();
        this.setState({ value: e.target.value });
    }

    keyDown(e) {
        if (e.keyCode == 13 && e.shiftKey == false) {
            e.preventDefault();
            this.myFormRef.submit();
        }
    }

    handleSubmit(e) {
        e.preventDefault();
        const text = e.target.body.value;
        // Call backend here
        e.target.body.value = '';
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit} ref={el => (this.myFormRef = el)}>
                <textarea
                    rows="3"
                    name="body"
                    onKeyDown={this.keyDown}
                    value={this.state.value}
                    onChange={this.handleChange}
                />
                <button className="btn" type="submit">
                    Comment
                </button>
            </form>
        );
    }
}

export default PostComment;

Answer 1

我的第一个猜测是Using the URLconf defined in mysite.urls, Django tried these URL patterns, in this order: admin/ [name='index'] blog/ blog/ (?P<int:pk>\d+) The current path, blog/2, didn't match any of these.不会触发*.submit()事件，另请参阅类似问题here，建议直接调用onSubmit处理程序（在此例如，这意味着例如使用＆＃34;假的＆＃34;事件有效负载调用onsubmit ...另一种解决此问题的方法是触发提交按钮单击而不是输入表单提交：

this.handleSubmit

受控制的React表单重新加载，而不是在从keyDown事件手动提交后重新加载

1 个答案: