时间戳

首页 > 解决方案 > 从数据库添加项目到列表并在提交后清除输入

javascript - 从数据库添加项目到列表并在提交后清除输入

问题描述

我有一个简单的列表，我从 DB 获得并使用.map(). 我想在这个列表中添加更多项目并在之后清除输入，这样我就可以发回带有新项目的“旧列表”。我怎样才能做到这一点？哪个是最佳实践？这是一个愚蠢的问题，所以我很抱歉。

this.state = {
  newRules: {
    rules: [],
    rulesTerm: ''
  }
};

handleInput = e => {
  let value = e.target.value;
  let name = e.target.name;
  console.log(value);
  console.log(name);

   this.setState(prevState => ({
     newRules: {
      ...prevState.newRules,
      [name]: value
     }
  }));
};

addRule = () => {
  e.preventDefault();
  let rules = this.state.field.rules;
  let newRules = this.state.newRules.rules

  rules.push(newRules)
  console.log(rules)

  this.setState({
    newRules: {
      rules: rules
    }
  }
 };

<ul>
  {this.state.db.rules.map(rule => {
    // this.state.db.rules is data from DB
     return <li key={rule}>{rule}</li>;
   })}
   {this.state.editMode ? (
     <form onSubmit={this.addRule}>
      <Input
        type="text"
        placeholder="regras"
        name="rules"
        onChange={this.handleRules}
        value={this.state.newRule}
      />
      <button type="submit">Adicionar +</button>
     </form>
   ) : null}
 </ul>;

谢谢！:)

标签： javascriptreactjs

解决方案

方法 1：连接

var array1 = ['a', 'b', 'c'];
var array2 = ['d', 'e', 'f'];

console.log(array1.concat(array2));
// expected output: Array ["a", "b", "c", "d", "e", "f"]

方法2：拼接

var months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at 1st index position
console.log(months);
// expected output: Array ['Jan', 'Feb', 'March', 'April', 'June']

推荐阅读