React js - 使用文本框值和 c#

Question

var CommentForm = React.createClass({
    handleSubmit: function(e) {
        e.preventDefault();

        var author = this.refs.author.value;
        var text = this.refs.text.value;

        if (!text || !author){
            return;
        }

        this.props.onCommentSubmit({Author:author, Text:text});
        this.refs.author.value = '';
        this.refs.text.value = '';
        return;
    },
    render: function(){
        return (
            <form className="commentForm" onSubmit={this.handleSubmit}>
                <input type="text" placeholder="Your name" ref="author"/>
                <input type="text" placeholder="Say something" ref="text" />
                <input type="submit" value="Post" />
            </form>
        );
    }
});

以上代码运行良好。但是很多 PPL 说不要使用 REFS。所以我试过了，但有两个问题。

var CommentForm = React.createClass({
    handleSubmit: function(e) {
        e.preventDefault();       

        var form = e.target;
        var author = form.querySelector('[name="author"]');
        var text = form.querySelector('[name="text"]');

        if (!text || !author){
            return;
        }

        this.props.onCommentSubmit({Author:author, Text:text});

        // HOW TO BLANK OUT THE AUTHOR AND TEXT FIELDS ??? 

        return;
    },
    render: function(){
        return (
            <form className="commentForm" onSubmit={this.handleSubmit}>
                <input type="text" placeholder="Your name" name="author"/>
                <input type="text" placeholder="Say something" name="text" />
                <input type="submit" value="Post" />
            </form>
        );
    }
});

两个问题： 1) 由于我不再有参考文献，我该如何清空两个文本输入字段？

2) 当它提交给 C# 控制器时，值（例如，"Jack Smith"、"This is text" 都被转换为文字“[object HTMLInputElement]”。在翻译中丢失了一些东西.

handleCommentSubmit: function(comment) {
        var data = new FormData();
        data.append('Author', comment.Author);
        data.append('Text', comment.Text);

        var xhr = new XMLHttpRequest();
        xhr.open('post', this.props.submitUrl, true);
        xhr.onload=function() {
            this.loadCommentsFromServer();
        }.bind(this);
        xhr.send(data);

此时作者和文本值是正确的。但是在 "xhr.send(data)" 上，当它遇到 C# API 控制器方法时，值已被转换为文字“[object HTMLInputElement]”。

如果您已经读到这里，谢谢...;-)

Answer 1

两个问题解决的是同一个问题。您必须使用 input 的 value 属性，而不是 DOM 节点本身。

那么你应该做的是：

this.props.onCommentSubmit({Author: author.value, Text: text.value});

您也可以通过再次覆盖此值来清除输入：

author.value = '';
text.value = '';

在我看来，更好、反应更快的方法是使用受控输入。定义状态变量 author 和 text 并将它们与 onChange 函数绑定。这样你也可以在输入时做一些验证。

查看工作示例：https://jsfiddle.net/oxak1azv/2/

还有https://facebook.github.io/react/docs/forms.html

React js - 使用文本框值和 c#

React js - working with textbox values and c#

c#

textbox

reactjs