Question

下午好！

我在阅读完教程之后一直在玩，并且遇到了一个我似乎无法理解的问题。

每当我通过this.props.updateSurveyText(this.props.index, newText)传递变量时，当他们进入updateSurveyText={this.updateSurvey.bind(i, newText[0], newText[1])}

时，他们会更改回旧变量

记录在第一个函数中显示正确的变量，但是当我在第二个函数中记录它们时，它们没有变化。

非常感谢帮助！

调查：

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();
      }
  }
}

板：

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

您的updateSurvey函数接受三个参数。

updateSurvey(newTitle, newDesc, i)

当你在一个函数上调用.bind时，你提供了“在调用目标函数时为绑定函数提供的参数添加前缀的参数”。 Function.prototype.bind

这意味着当你打电话

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

传递给updateSurveyText的函数有两个参数，只要它被调用就会永久地附加到它的参数列表中。无论调用newText[0]时newText[1]和.bind的值是什么，都会在调用updateSurveyText时用作第一个和第二个参数。

以下是一个例子：

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

反应变量在jsx中发生变化

1 个答案: