React Variablen ändern in Jsx

Question

Guten Tag!

Ich habe herum gespielt, nachdem ich einem Tutorial gefolgt bin und bin auf ein Problem gestoßen, das ich anscheinend nicht verstehe.

Immer, wenn ich auf Variablen durch einen this.props.updateSurveyText(this.props.index, newText) passieren ändern sie zurück zu den alten Variablen, wenn sie in zu bekommen updateSurveyText={this.updateSurvey.bind(i, newText[0], newText[1])}

Logging zeigt die richtigen Variablen in der ersten Funktion, aber wenn ich sie in der zweiten Funktion log sind sie unverändert.

Hilfe wird sehr geschätzt!

Umfrage:

import React from 'react'; 
import ReactDOM from 'react-dom'; 

export default class Survey extends React.Component{ 
    constructor(props){ 
    super(props); 
    this.state = { 
     editing : false, 
     title : "", 
     desc : "", 
    }; 
    this.edit = this.edit.bind(this); 
    this.save = this.save.bind(this); 
    this.remove = this.remove.bind(this); 
    } 

    edit() { 
    this.setState({editing: true}); 
    } 

    remove() { 
    console.log('delete'); 
    this.props.deleteFromBoard(this.props.index) 
    } 

    save() { 
    var title = this.refs.newTitle.value; 
    var desc = this.refs.newDesc.value; 
    var newText = [title, desc]; 
    console.log(newText[0]); 
    this.props.updateSurveyText(this.props.index, newText); 
    this.setState({editing: false}); 
    } 

    renderNormal(){ 
    return(
     <div className="surveyContainer"> 
     <div className="surveyTitle">{this.props.children[0]}</div> 
     <div className="surveyDesc">{this.props.children[1]}</div> 
     <button onClick={this.edit} className="button-primary">Edit</button> 
     <button onClick={this.remove} className="button-primary">Remove</button> 
     </div> 
    ); 
    } 

    renderForm(){ 
    return(
     <div className="surveyContainer"> 
     <textarea ref="newTitle" defaultValue={this.props.children[0]}></textarea> 
     <textarea ref="newDesc" defaultValue={this.props.children[1]}></textarea> 
     <button onClick={this.save} className="button-primary">Save</button> 
     </div> 
    ); 
    } 

    render(){ 
     if(this.state.editing){ 
     return this.renderForm(); 
     }else{ 
     return this.renderNormal(); 
     } 
    } 
} 

Verpflegung:

import Survey from './Survey.jsx'; 
import React from 'react'; 
import ReactDOM from 'react-dom'; 

export default class Board extends React.Component{ 
    constructor(props){ 
    super(props); 
    this.state = { 
     surveys: [ 

     ], 
    }; 
    this.updateSurvey = this.updateSurvey.bind(this); 
    this.removeSurvey = this.removeSurvey.bind(this); 
    this.eachSurvey = this.eachSurvey.bind(this); 
    this.addSurvey = this.addSurvey.bind(this); 
    } 

    addSurvey(title, desc){ 
    var arr = this.state.surveys; 
    arr.push([title, desc]); 
    this.setState({surveys: arr}) 
    } 

    removeSurvey(i){ 
    var arr = this.state.surveys; 
    arr.splice(i, 1); 
    this.setState({surveys: arr}) 
    } 

    updateSurvey(newTitle, newDesc, i){ 
    console.log(newTitle);console.log(newDesc); 
    var arra = this.state.surveys; 
    arra[i] = [newTitle, newDesc]; 
    this.setState({surveys: arra}); 

    } 

    eachSurvey(newText, i){ 
    return(
     <Survey key={i} index={i} updateSurveyText={this.updateSurvey.bind(i, newText[0], newText[1])} deleteFromBoard={this.removeSurvey.bind(i)}> 
     {newText[0]} 
     {newText[1]} 

     </Survey>); 
    } 

    render(){ 
    return(
     <div> 
     <button onClick={this.addSurvey.bind(null, "Titel", "Desc")}>Add new</button> 
     <div className="board"> 
      {this.state.surveys.map(this.eachSurvey)} 
     </div> 
     </div> 
    ) 
    } 
} 

Answer 1

Ihre updateSurvey Funktion akzeptiert drei Argumente.

updateSurvey(newTitle, newDesc, i)

Wenn Sie .bind auf eine Funktion aufrufen, die Sie bereitstellen „Argumente zu Argumente an die gebundenen Funktion vorgesehen vorangestellt wird, wenn die Zielfunktion aufgerufen wird.“ Function.prototype.bind

was bedeutet, dass, wenn Sie

updateSurveyText={this.updateSurvey.bind(i, newText[0], newText[1])}

die Funktion überliefert als updateSurveyText nennen hat zwei Argumente permanent auf ihre Argumente Liste vorangestellt, wenn sie aufgerufen wird. Was immer der Wert von newText[0] und newText[1] zu der Zeit war, als .bind aufgerufen wurde, wird als erstes und zweites Argument verwendet, wenn updateSurveyText aufgerufen wird.

Hier ist ein Beispiel:

function add(first, second) { 
 
    console.log('add called with args: ', first, second); 
 
    console.log('all arguments: ', [].slice.call(arguments)); 
 
    return first + second; 
 
} 
 

 
document.write('add(1, 1) = ' + add(1, 1)); 
 
document.write('<br>'); 
 

 
var boundAdd = add.bind(null, 1, 1); 
 

 
// despite passing new arguments, 2 and 2, the 
 
// bound function has 1 and 1 bound to it and will not 
 
// use 2 and 2 as the first and second arg. 
 
// 1 and 1 are prepended to the arguments list. 
 
document.write('boundAdd(2, 2) = ' + boundAdd(2, 2));