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

Question

目前，我的代码将打印出用户在提交后在输入框中键入的内容。如果我输入 'Dave'，它就会被打印出来。如果我然后键入 'Paul'。 Paul 替换了 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 被分配给 submittedValue 然后提交的值被打印出来。

我已经开始使用这个

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

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

Answer 1

Once 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 中打印出一组用户输入

How to print out an array of user inputs in ReactJs

javascript

arrays

user-input

reactjs