将项目添加/删除到数组中

Question

so I am learning react js and i have stumbled upon a problem which i can't seem to solve. So i have one input that sets the number of break points, and as that number get bigger, more inputs are rendered, and those inputs are for giving a value for each 'breakpoint'. Now this is what i can't seem to figure out, if I type in for example '20' and '30' they are added to the array, no problem, however if I want to change the value of the first one(20) to a lower value, let's say 10 I can't figure out how to remove the existing 20 and replace it with a new one(10)... Here's the codepen: https://codepen.io/anon/pen/MVZMRq

so far i have this:

class App extends React.Component {
constructor() {
    super();

    this.state = {
        breakPointsCount: 0,
        range: []
    }
}
addBreakPoints(event) {
    this.setState({
        breakPointsCount: parseInt(event.target.value, 10),
        progress: 0,
        range: []
    });
}

addBreakPointValue(event) {
    const enteredValue = parseInt(event.target.value, 10);
    const range = this.state.range.slice(0);
    const breakpointsCount = this.state.breakPointsCount;
  
    if (range.length < breakpointsCount) {
        range.push(enteredValue);
    }

    this.setState({
        range: range,
        progress: 0,
    });
}

render() {
    const range = this.state.range;
    const breaks = Array.from(Array(this.state.breakPointsCount));

    return (
        <div className="progress">
          [{range.map((item, i) => (
            <div key={item}>
              <span className="break-point-value">{item}</span>
            </div>
          ))}]
        
          <div className="progress-options">
            <label>Change count of break points (up to 10) </label>

            <input type="number"
              min="0"
              max="10"
              name="numberInput"
              className="app-input"
              onChange={this.addBreakPoints.bind(this)}
              />
          </div>
          <div className="progress-options">
            <label>Change a value for each break point </label>

            {breaks.map((item, i) => (
              <input type="number"
                key={`break-${i}`}
                className="app-input"
                onBlur={this.addBreakPointValue.bind(this)}
                />
            ))}

          </div>
        </div>
    )
}
}
React.render(<App />, document.getElementById('app'));

Answer 1

Here is the link to fixed codepen . I have made two changes.
First in addBreakPoints method i init the range to array of the size of the input initialized with zeroes (for 5 its gonna be [0,0,0,0,0] )

    addBreakPoints(event) {
        this.setState({
            breakPointsCount: parseInt(event.target.value, 10),
            progress: 0,
            range: [...Array(parseInt(event.target.value, 10)).map(()=>0)]
        });
    }

next in render() method i bind addBreakPointValue to pass the index of the element to be updated.

    {breaks.map((item, i) => (
        <input type="number"
               key={`break-${i}`}
               className="app-input"
               onBlur={this.addBreakPointValue.bind(this,i)}
          />
     ))}

and finally in addBreakPointValue i only update the desired element (map function return same value for all indexes except new value for the index that is passed as parameter to addBreakPointValue )

    addBreakPointValue(index, event) {
        const enteredValue = parseInt(event.target.value, 10);
        this.setState((prevState) => ({range : prevState.range.map((r,i) => {
          if(i != index) return r
          return enteredValue
        })}))
    }

Hope it is helpful for you.

Edit: Although it now updates values, there is still issues with this code. I will propose a complete solution later.

Answer 2

You will need to keep track of which input got changed, so you would want to pass some kind of id to the input.

I recommend using a Component composition instead of binding and passing parameters to the inline handler.
You can write a small and simple Input component that all it does is getting a value and id and passing it back up onChange (or onBlur ) in your case.

Then your change handler could look something similar to this:

 addBreakPointValue = (value, id) => {
    this.setState(({range}) => {
      const nextRange = [...range];
      nextRange[id] = value;
      return{
        range: nextRange
      }
    });
  }

I wrote a simple example with your code, note that i changed some stuff, like using arrow functions as handlers (class members) so we can take advantage of their lexical context with this instead of binding the functions to the class .

 class Input extends React.Component { onBlur = ({ target }) => { const { id, onBlur } = this.props; onBlur(target.value, id); } render() { const { value } = this.props; return ( <input type="number" min="0" max="10" value={value} onBlur={this.onBlur} /> ) } } class App extends React.Component { state = { breakPointsCount: 0, range: [] } addBreakPoints = ({ target }) => { const val = parseInt(target.value, 10); this.setState({ breakPointsCount: val }); } addBreakPointValue = (value, id) => { this.setState(({range}) => { const nextRange = [...range]; nextRange[id] = value; return{ range: nextRange } }); } render() { const { range, breakPointsCount } = this.state; const breaks = Array.from(Array(breakPointsCount)); return ( <div className="progress"> <div className="progress-bar-wrapper"> <div className="progress-bar" style={{ width: `${this.state.progress}%` }} /> [{range.map((item, i) => ( <div key={item}> <span className="break-point-value">{item}</span> </div> ))}] </div> <div className="progress-options"> <label>Change count of break points (up to 10) </label> <input type="number" min="0" max="10" name="numberInput" className="app-input" onChange={this.addBreakPoints.bind(this)} /> </div> <div className="progress-options"> <label>Change a value for each break point </label> {breaks.map((item, i) => ( <Input type="number" key={i} id={i} value={item} className="app-input" onBlur={this.addBreakPointValue} /> ))} </div> </div> ) } } ReactDOM.render(<App />, document.getElementById('app'));

 <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>