Question

我有一个输入，将内容添加到ul中，我试图让li进入一个数组，以便在其他地方使用。

                <input
                  className="input-fields"
                  maxLength="25"
                  id="ingredient"
                  type="text"
                  placeholder="Ingredient"
                  onKeyPress={this.handleKeyPress}
                />
                <ul
                  ref={input => (this.ingredients = input)}
                  id="recipeItems"
                  className="recipe-items"
                />

在另一个按钮按下我试图让它采取表格并将其添加到一个对象，我有大部分工作，但我只是无法弄清楚如何从ul成为一个数组的成分。它只是未定义的日志。

createRecipe(e) {
    e.preventDefault();
    const recipe = {
      name: this.name.value,
      ingredients: this.ingredients.value,
      instructions: this.instructions.value
    };
    console.log(recipe);
  }

Answer 1

您应该从组件的状态获取ul中的数据，而不是直接从ul DOM中获取数据。当您在ingredient中键入input时，您应该更改组件的状态，然后组件将根据新状态重新呈现（包括ul元素）。一旦您需要ingredients，只需从组件的状态获取它们。使用React时，请注意根据组件执行操作＆＃39;的状态。

Answer 2

这样做的一种方法是将li数据存储在一个状态中。这允许您在当前子组件的任何子组件中使用数据。但是，如果您希望在其之外使用数据（例如当前父组件的父组件），则可能需要状态管理库，如redux或flux。

以下是如何在组件状态下存储li数据的示例。

＆＃13;

class Container extends React.Component {
  constructor() {
    super();
    this.state = {
      ingredients: [] // you can use pass this data to any child components here
    };
  }
  handleAddIngredient = (e) => {
    e.preventDefault();
    const newIngredient = e.target.children[0].value;
    this.setState((prevState) => ({
      ingredients: prevState.ingredients.concat([newIngredient])
    }))
  }
  
  render() {
    return <div>
      <form onSubmit={this.handleAddIngredient}>
        <input type="text" name="ingredient"/>
        <input type="submit" value="add ingredient"/>
      </form>
      <IngredientList data={this.state.ingredients} />
    </div>
  }
}

class IngredientList extends React.Component {
  render() {
    return <div>
      list of ingredients
      <ul>
        { this.props.data.map((ing, i) => <li key={i}>{ing}</li>) }
      </ul>
    </div>
  }
}

ReactDOM.render(<Container />, document.getElementById('app'))

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

＆＃13;

试图让用户从ul输入li到数组

2 个答案: