Question

我正在使用Meteor和React。我有一个非常简单的目标，但我已经尝试了很多，并不能为自己解决它。我将在下面向您展示我的尝试。

我想为Ingredients创建一个表单。在第一时刻，只有一个输入（仅一种成分）和2个按钮：添加成分并提交。

class IngredientForm extends Component {
  render() {
    return(

      <form onSubmit={this.handleSubmit.bind(this)}>

        <input type="text"/>

        { this.renderOtherInputs() }

        <input type="button" value="Add Ingredient" onClick={this.addIngredient.bind(this)}>

        <input type="submit" value="Submit Form">

      </form>
    );
  }
}

因此，当我单击Submit时，所有数据都将转到集合中。当我单击Add Ingredient时，会出现另一个文本输入（在renderOtherInputs（）的位置。

我知道，Meteor 被动 - 所以不需要直接渲染。我应该成为无效数据存储的基础。

我从教程中知道了渲染内容的唯一方法 - 我应该有一个数组（基于集合，总是被动的），然后为每个元素呈现阵列。

所以我应该有一个元素数量=附加输入数量的数组。这是本地的，所以我不能使用Collection，让我们使用 Reactive Var 而不是它。

numOfIngredients = new ReactiveVar([]);

当我单击Add按钮时 - 应该将新元素推送到此数组：

addIngredient(e) { e.preventDefault(); let newNumOfIngredients = numOfIngredients.get(); newNumOfIngredients.push('lalal'); numOfIngredients.set(newNumOfIngredients); }

毕竟我应该渲染额外的输入（假设我在阵列中有多少元素）：

renderOtherInputs() { return numOfIngredients.get().map((elem) => { return( <input type="text"/> ); } }

我的想法是：当我单击Add按钮时，新元素将被推送到ReactiveVar（newNumOfIngredients）。在html代码中，我调用this.renderOtherInputs（），它返回html作为我在ReactiveVar（newNumOfIngredients）中的元素的输入。 newNumOfIngredients是数据的反应存储 - 所以当我将元素推送到它时，所有依赖它的东西都应该重新渲染。我不知道为什么那不起作用以及如何做到这一点。

感谢您的帮助。

Answer 1

最后我得到了解决方案。但是你们为什么不帮助新手上网呢？这对于经验丰富的开发人员来说真的很简我读过流星，特别是反应有强大的社区，但是......

答案是：我们应该使用州！

首先让我们在react组件的构造函数中定义我们的状态对象：

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

然后我们需要一个函数来渲染state.inputs的输入：

renderOtherInputs() {
  return this.state.inputs.map( (each, index) => {
    return (
      <input key={ index } type="text" />
    );
  });
}

并添加输入：

addInput(e) {
  e.preventDefault();
  var temp = this.state.inputs;
  temp.push('no matter');
  this.setState({
    inputs: temp,
  });
}

P.S。并删除每个输入：

deleteIngredient(e) {
  e.preventDefault();
  let index = e.target.getAttribute('id');
  let temp = this.state.inputs;
  delete temp[index];
  this.setState({
    inputs: temp,
  });
}

在Meteor中点击创建元素

1 个答案: