入力を削除すると不正な値になる

Question

問題は非常に単純ですが、説明するのは難しいです。

私は入力のリストを生成するInputGeneratorコンポーネントを作成しています。

各入力には、対応する「削除」ボタンがあります。 2つの要素（入力とボタン）は、マップ関数内のdivにラップされます。 divにはユニークなキーの小道具があります。それは（これは全体のコンポーネントのJSXである）次のようになります。

 <div style={[InputGenerator.style.wrapper]}> 
      <div className="container" style={InputGenerator.style.container}> 
       {this.state.inputs.map((input, idx) => { 
        return (
         <div key={idx} style={[ 
          InputGenerator.style.row, 
          InputGenerator.count > 1 && idx > 0 ? InputGenerator.style.input.pushTop : {}, 
         ]}> 
          <InputText 
           id={input.id} 
           name={input.name} 
           placeholder={input.placeholder} 
           style={input.style} 
          /> 
          <Button 
           style={InputGenerator.style.remove} 
           type={Button.TYPES.BASIC} 
           icon="ion-close-round" 
           onClick={this.remove.bind(this, input.id)} 
          /> 
         </div> 
        ); 
       })} 
      </div> 

      <div className="controls" style={InputGenerator.style.controls}> 
       <Button icon="ion-plus" type={Button.TYPES.PRIMARY} title="Add ingredient" onClick={this.add.bind(this)}/> 
      </div> 
     </div> 

ご覧の通り、全ての入力がthis.stateオブジェクトに保管されており、それぞれが固有のIDを与えています。

アドオン（）：

add() { 
    InputGenerator.count++; 

    const newInput = { 
     id: this.id, 
     name: this.props.name, 
     placeholder: this.props.placeholder, 
     style: this.style, 
     value: '', 
    }; 

    const inputs = this.state.inputs; 

    inputs.push(newInput); 

    this.setState({ inputs }); 
} 

のremove（）：

remove(id) { 
    this.setState({ 
     inputs: this.state.inputs.filter(i => i.id !== id), 
    }); 
} 

問題がある：

• 私はここで

  は、インクルードの追加と削除メソッドをされています3つの入力を生成する（追加ボタンを使用）

• 私は入力にランダムな値を入れる（例：1、2、3）
• 私が最初の要素に対応し、削除ボタンをクリックします（値は1）
• 結果：値1を持つ2つの入力項目2
• 期待値：2と3の値を持つ2つの入力項目
• 問題：ラッピングdivのキーの小数点は、入力の値を把握するのに十分ではないことをお勧めします。

私はアイデアや進め方をお手伝いしています。事前にhttps://codesandbox.io/s/5985AKxRB

ありがとう：

は、ここに私のコンポーネントで遊んで、アクションの「バグ」を参照するには孤立したサンドボックスです！ :)

Answer 1

あなたが直面する問題は、適切に状態を処理していないためです。入力値を変更するときに状態を更新する必要があります。

handleChange(index,event) { 
    let inputs = this.state.inputs; 
    inputs[index].value = event.target.value; 
    this.setState({inputs:inputs}) 
    } 

DEMO：DEMO

ここでは、更新されたコードです：

import React, { Component } from 'react'; 
    import { render } from 'react-dom'; 
    import Hello from './Hello'; 

    const styles = { 
     fontFamily: 'sans-serif', 
     textAlign: 'center', 
    }; 

    const App =() => 
     <div style={styles}> 
     <InputGenerator /> 
     </div>; 

    class InputGenerator extends Component { 
     constructor() { 
     super(); 
     this.state = { 
      inputs: [], 
     }; 
     } 
     componentWillMount() { 
     this.add(); 
     } 
     handleChange(index,event) { 
     let inputs = this.state.inputs; 
     inputs[index].value = event.target.value; 
     this.setState({inputs:inputs}) 
     } 
     add() { 
     InputGenerator.count++; 

     const newInput = { 
      id: this.id, 
      name: this.props.name, 
      placeholder: this.props.placeholder, 
      style: this.style, 
      value: '', 
     }; 

     const inputs = this.state.inputs; 

     inputs.push(newInput); 

     this.setState({ inputs }); 
     } 
     get id() { 
     if (this.props.id) { 
      return `${this.props.id}-${InputGenerator.count}`; 
     } 

     return `InputGeneratorItem-${InputGenerator.count}`; 
     } 
     get style() { 
     return []; 
     } 
     remove(id) { 

     var state = this.state; 
     state.inputs = state.inputs.filter(i => i.id !== id); 
     this.setState({ 
      inputs: state.inputs 
     }); 
     } 
     render() { 
     return (
      <div> 
      <div className="container"> 
       {this.state.inputs.map((input, idx) => { 
       return (
        <div key={idx}> 
        <input 
         id={input.id} 
         name={input.name} 
         value = {input.value} 
         onChange={this.handleChange.bind(this,idx)} 
         placeholder={input.placeholder} 
        /> 
        <button onClick={this.remove.bind(this, input.id)}> 
         Remove 
        </button> 
        </div> 
       ); 
       })} 
      </div> 

      <div className="controls"> 
       <button onClick={this.add.bind(this)}>Add</button> 
      </div> 
      </div> 
     ); 
     } 
    } 

    InputGenerator.count = 0; 

    render(<App />, document.getElementById('root'));