javascript - 如何处理 React 中动态创建的受控输入？

Question

所以我一直在尝试创建多个动态创建的受控输入。但是，如果我按 add ingredient 按钮添加输入，则在我向其添加文本时，新创建的输入不会保留焦点。
奇怪的事情(或线索)是第一个输入在添加新输入后确实保持焦点，只是添加的输入不能正常工作。

为了清楚起见，我用伪代码格式提出了问题:

if(Not react way of creating multiple dynamically created controlled inputs) {  
 question = How to create multiple dynamically created controlled inputs in React way?  
} else {  
 question = How to make the dynamically created input retain focus?  
}

代码是(工作 jsfiddle 片段):

class Modal extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      ingredients: [{ value: 'aap'}]
    }
  }
  addIngredient(e) {
    const old = this.state.ingredients
    const newState = [...old, {value: ''}]
    this.setState(
      {ingredients: newState}
    )
  }
  handleInput(e, i) {
    console.log(e.target.value)
   var newState = this.state.ingredients
   newState[i].value = e.target.value
   /*var promise = new Promise( (resolve, reject) => { 
     return this.setState({ ingredients: newState}) })
   promise.then( () => {return e.target.focus()} ) */
    this.setState( { ingredients: newState } )
    e.target.focus()
  }

  render() {
    const inputs = this.state.ingredients
    return (
      <div className="modal">
        <div className="modal-box">
          <form>
            <h1>Create your recipe</h1>
            <div>
              <label>Recipe name:</label>
              <input type="text" />
            </div>
            <div>
            <label>Ingredients:</label>
            {inputs.map( (input, i) => (
              <input value={input.value} onChange={(e) => this.handleInput(e, i)} key={`${i}-${i * Math.random()}`} />
            ))}
              <button id="ingredient-button" type="button" onClick={(e) => this.addIngredient(e)}><span>+</span>add ingredient</button>
            </div>
          </form>
         
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Modal/>, document.getElementById('root'))

<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='root'></div>

Answer 1

由于您的 key 是用随机数生成的，因此每次 DOM 重新呈现时，它都不会将其识别为相同的输入，从而失去焦点。我已将 key 更改为以下以使其工作。

key={`ingredients-${i}`}

class Modal extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      ingredients: [{ value: 'aap'}]
    }
  }
  addIngredient(e) {
    const old = this.state.ingredients
    const newState = [...old, {value: ''}]
    this.setState(
      {ingredients: newState}
    )
  }
  handleInput(e, i) {
   var newState = this.state.ingredients
   newState[i].value = e.target.value
   /*var promise = new Promise( (resolve, reject) => { 
     return this.setState({ ingredients: newState}) })
   promise.then( () => {return e.target.focus()} ) */
    this.setState( { ingredients: newState } )
  }

  render() {
    const inputs = this.state.ingredients
    return (
      <div className="modal">
        <div className="modal-box">
          <form>
            <h1>Create your recipe</h1>
            <div>
              <label>Recipe name:</label>
              <input type="text" />
            </div>
            <div>
            <label>Ingredients:</label>
            {inputs.map( (input, i) => (
              <input value={input.value} onChange={(e) => this.handleInput(e, i)} key={`ingredients-${i}`} />
            ))}
              <button id="ingredient-button" type="button" onClick={(e) => this.addIngredient(e)}><span>+</span>add ingredient</button>
            </div>
          </form>
         
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Modal/>, document.getElementById('root'))

<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='root'></div>