Question

目前，我的代码将打印出用户在提交后输入框中输入的内容。如果我输入“Dave＆＃39;”，就会打印出来。如果我输入＆＃39; Paul＆＃39;。保罗取代了戴夫输出的地方。我想要一种方法，如果我输入另一个名称而不是替换它，它将在下面打印出来，无限次。我正在考虑使用数组而不是当前的字符串，但不知道如何做到这一点。这是我目前的代码：

var ToDoForm = React.createClass({

    getInitialState: function() {
      return {text: '', submittedValue: ''};
    },
    handleChange: function(event) {
      this.setState({text: event.target.value});
    },
    handleSubmit: function(e) {
      e.preventDefault();
      this.setState({submittedValue: this.state.text});
      console.log("ToDO: " + this.state.text);
    },

    render: function() {
      return (
          <div>
            <h1> todos </h1>

            <form className="todoForm" onSubmit={this.handleSubmit}>
              <input
                  type="text"
                  placeholder="Type out a task"
                  value={this.state.text}
                  onChange={this.handleChange}
                  />
              <input
                  type="submit"
                  value="Submit todo"
                  />
            </form>

            <h2> Data should appear here </h2>
              <p>{this.state.submittedValue}</p>
          </div>
      );
    }

  });

到目前为止，text已分配给submittedValue，然后提交的值将被打印出来。

我已经开始使用

了

getInitialState: function() {
      return {text: '', submittedValue: []};
    },

但现在我不知道下一步该做什么

Answer 1

sumittedValue状态为一个数组。你应该只能push到它：

handleSubmit: function(e) {
      e.preventDefault();
      this.state.subittedValue.push(this.state.text);
      this.setState({submittedValue: this.state.subittedValue});
      console.log("ToDO: ", this.state.submittedValue);
    },

当然，你必须循环遍历数组（map）才能呈现：

<h2> Data should appear here </h2>
{this.state.submittedValue.map(
    function(value, i) { 
        return (<p key={'val-' + i}>{value}</p>);
    }
)}

需要

key来唯一标识循环<p>。否则，渲染时会显示警告。

如何在ReactJs中打印出一组用户输入

1 个答案: