时间戳

首页 > 解决方案 > 我如何在 react.js 中使用数组输入

javascript - 我如何在 react.js 中使用数组输入

问题描述

我在学生集合中有一个学位数组作为更大模型 mongodb 的一部分，在学位数组中我有一个元素的注释，我如何以输入的形式使用它并将其添加到表中

Create.js 组件表单：具有属性类型字符串和数组的构造函数


  constructor() {
    super();
    this.state = {
      firstname: '',
      lastname: '',
      degrees : [
         {id '',
          note ''
          }
      ]
    };
  }

  onSubmit = (e) => {
    e.preventDefault();

    const { firstname, lastname } = this.state;

    axios.post('/students', { firstname, lastname })
      .then((result) => {
        this.props.history.push("/")
      });
  }

表单的 Rander 方法


  render() {
    const { firstname, lastname , degrees } = this.state;
    return (
      <div class="container">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">
              Add Student
            </h3>
          </div>
          <div class="panel-body">
            <h4><Link to="/"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> Students List</Link></h4>
            <form onSubmit={this.onSubmit}>
              <div class="form-group">
                <label for="isbn">First Name:</label>
                <input type="text" class="form-control" name="firstname" value={firstname} onChange={this.onChange} placeholder="First Name" />
              </div>
              <div class="form-group">
                <label for="title">Last Name:</label>
                <input type="text" class="form-control" name="lastname" value={lastname} onChange={this.onChange} placeholder="Last Name" />
              </div>

              <button type="submit" class="btn btn-default">Submit</button>
            </form>
          </div>
        </div>
      </div>
    );
  }

App.js 组件表，用于列出 First Name| 等表单 姓氏 |注

  constructor(props) {
    super(props);
    this.state = {
      students: []
    };
  }

  componentDidMount() {
    axios.get('/students')
      .then(res => {
        this.setState({ students: res.data });
        console.log(this.state.students);
      });
  }

列出数据的渲染方法


  render() {
    return (
      <div class="container">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">
              Students List
            </h3>
          </div>
          <div class="panel-body">
            <h4><Link to="/create"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> Add Student</Link></h4>
            <table class="table table-stripe">
              <thead>
                <tr>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Note</th>
                </tr>
              </thead>
              <tbody>
                {this.state.students.map(c =>
                  <tr>
                    <td><Link to={`/show/${c.id}`}>{c.firstname}</Link></td>
                    <td>{c.lastname}</td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    );
  }

标签： javascriptreactjsaxios

解决方案

在您的父组件 (App.js) 中创建一个函数

updateStudentList = newStudent => {
  this.setState( prevState => ({
   students: [...prevState.students, newStudent];
  }));

将此函数作为道具传递给您的子组件 (Create.js) 将您的表单提交到您的服务器。如果提交成功，执行

this.props.updateStudentList({
    firstname: this.state.firstname, 
    lastname: this.state.lastname
});

一旦 (App.js) 的学生状态发生变化，渲染将被触发，您应该会看到您的表有一个新学生

推荐阅读