Dynamische Schlüssel in Update Helfer Unveränderlichkeit für Array

Question

https://facebook.github.io/react/docs/update.html

Ich habe eine Update-Funktion, die einen Index zusammen mit dem Ereignis empfängt, um den Wert für das jeweilige Element im Array zu ändern.

Wie bekomme ich index, um in diesem Szenario als Set-Schlüssel behandelt zu werden, anstatt als behandelt zu werden? Ist es überhaupt möglich?

updateValue: function(index, e) { 
    var items = React.addons.update(this.state.items, { 
    index: { 
    amount: {$set: e.target.value} 
    } 
    }); 
    this.setState({ 
    items: items 
    }) 
} 

Rechts dies jetzt offensichtlich nicht funktioniert, weil es this.state.items['index']['amount'] zu aktualisieren ist versucht, die nicht gesetzt ist, wenn ich könnte this.state.items[1]['amount'] für einen Index von 1.

Answer 1

Sie ES6 computed property names, verwenden Sie ändern möchten, die aussehen würde wie dies mit Ihrem index Variable:

updateValue(index, e) { 
    var items = React.addons.update(this.state.items, { 
    [index]: { 
     amount: {$set: e.target.value} 
    } 
    }) 
    this.setState({items}) 
} 

nach dieser ES6 compatability table, unterstützt sie JSX Transpiler die reagieren, wenn seine Harmony Transformationen aktiviert sind, oder Sie könntenverwendenstattdessen (seit react-tools is being deprecated in favour of Babel sowieso).

dass Andernfalls könnten Sie eine Hilfsfunktion verwenden, um ein Objekt mit einer bestimmten benannte Eigenschaft zu erstellen:

function makeProp(prop, value) { 
    var obj = {} 
    obj[prop] = value 
    return obj 
} 

// ... 

updateValue: function(index, e) { 
    var items = React.addons.update(this.state.items, makeProp(
    index, { 
     amount: {$set: e.target.value} 
    } 
)) 
    this.setState({items: items}) 
}