Question

我是新手反应js并且我正在尝试构建一个简单的魔术方块游戏。我能够填充初始值。我坚持找出一种方法来获取用户输入以反映在父组件中。即，将空方格中输入的新值设置为Board类的handleChange（i）方法中的square [i]。

... WHERE sender-address IN ('mrsmith@contoso.com', 'mrbrown@contoso.com', ...) OR recipient-address IN ('mrsmith@contoso.com', 'mrbrown@contoso.com', ...) ...

Answer 1

这里有一些问题。

第1期

当您创建<Square />组件时，您将传递名为value和onChange的道具。但是，在Square组件中，您尝试使用this.handleChange作为onChange处理程序。

this.handleChange确实作为Square的属性存在。相反，您应该使用this.props.onChange父母传递给它的Board。

class Square extends React.Component {
  // handleChange () {
  // this is the none existant function referred to in the render function 
  // Instead: use this.props.onChange passed by the parent <Board /> 
  // }

  render()
  {
    return (
      <input type="text" className="square" value={this.props.value} onChange={this.handleChange}>
      </input>
    );
  }
}

由于......

，这仍然无效

第2期

输入的onChange方法应该是一个函数。

问题＃1已修复，Square的this.props.onChange将为undefined。这是因为我们将它作为prop传递时调用（调用）handleChange。由于handleChange没有返回值，我们会传递undefined。

renderSquare(i) {
  return (
    <Square
      value={this.state.squares[i]}
      onChange={this.handleChange(i)} // handleChange is being invoked! Note ()
    />
  );
}

修复此问题的最小编辑需要handleChange返回一个函数，该函数接受我们用来更新状态的事件。

handleChange (i) {
  // Return ES6 bound function to maintain `this`
  return (e) => {
    const squares = this.state.squares.slice();
    squares[i] = e.target.value; // The value of the input
    this.setState({squares: squares});
  };
}

P.S。一些其他一般性评论; renderSquare应绑定到构造函数中的this，如handleChange

this.renderSquare = this.renderSquare.bind(this);
this.handleChange = this.handleChange.bind(this);

我还会将generateRandomNumb和check移出<Board />的构造函数，并将它们放在您的示例代码的最顶层，在任何class之外。

同时将randArray代移动到一个函数中，也移到顶部。

function generateRandArray () {
  var randArray = [];
  for(var i = 0; i < 3; i++) 
  {
    var numberIsInArray = false;
    var rand = generateRandomNumb(1, 9);
    for(var j = 0; j < randArray.length; j++){
      if(rand === randArray[j]) {
        numberIsInArray = true;
        i--;
      }
    }
    if(!numberIsInArray){
      randArray.push(rand);
    }
  }
  return randArray;
}

在<Board />

的构造函数中

const randArray = generateRandArray();

将onChange绑定值与父级中的数组进行反应

1 个答案: