javascript - 如何在 ReactJs 中打印出用户输入的数组

Question

目前，我的代码将打印出用户提交后在输入框中输入的内容。如果我输入“Dave”，就会打印出来。如果我输入“保罗”。保罗取代了戴夫的位置。我想要一种方法，如果我输入另一个名称而不是替换它，它会在下面打印出来，无限次。我正在考虑使用数组而不是当前字符串，但不确定如何执行此操作。这是到目前为止我的代码:

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 已分配给 subscribedValue，然后打印出提交的值。

我已经开始了

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> 。否则，渲染时会显示警告。