Question

我试图学习一些反应，并为这个简单的概念而苦苦挣扎。我知道这只是我不熟悉的语法，但是我无法理解它。

我正在尝试创建井字游戏，每个方格都有一个值。单击正方形后，它将弹出一个警告框，显示“您已单击框{Box Number}”。我不知道如何将值传递给警报功能。

class Square extends React.Component {

  render() {
    return (
      <button className="square" onClick={function() {alert("Youve clicked box " + this.props.value);}}>
        {this.props.value}
      </button>
    );
  }
}

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;
  }

  render() {
    const status = 'Next player: X';

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

class Game extends React.Component {
  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
        <div className="game-info">
          <div>{/* status */}</div>
          <ol>{/* TODO */}</ol>
        </div>
      </div>
    );
  }
}

// ========================================

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);

Answer 1

查看您的代码并根据您的评论，问题在于您正在尝试访问不具有{{1}的对象（props）的this属性}属性。

执行此操作的一种方法是使用箭头功能。

props

另一种方法是绑定功能。

<button onClick={() => { alert(`Something ${this.props.value}`); }>Click Me</button>

或者，您可以在类中直接使用箭头功能，这样，如果您不想在render函数中定义一个箭头，就不必绑定。

class Box extends React.Component {
  constructor(props) {
   super(props)
   this.onClick = this.onClick.bind(this)
  }

  onClick() {
    alert()
  }

  render() {
    return (
      <button onClick={this.onClick}>Click Me</button>
    )
  }
}

演示：https://jsfiddle.net/1wfyq68r/

Answer 2

您将通过在onClick中使用函数声明来重新绑定package com.example.easfood import android.content.Context import android.content.Intent import android.content.SharedPreferences import android.support.v7.app.AppCompatActivity import android.os.Bundle import android.widget.Toast import com.google.android.gms.tasks.OnCompleteListener import com.google.android.gms.tasks.Task import com.google.firebase.auth.AuthResult import com.google.firebase.auth.FirebaseAuth import kotlinx.android.synthetic.main.activity_girish.* class girish : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_girish) qeydiyyatbutonu.setOnClickListener { startActivity(Intent(this,qeydiyyat::class.java)) } Gbuton.setOnClickListener { FirebaseAuth.getInstance().signInWithEmailAndPassword(Gnomre.text.toString(),Gsifre.text.toString()) .addOnCompleteListener(object:OnCompleteListener<AuthResult>{ override fun onComplete(p0: Task<AuthResult>) { if (p0.isSuccessful){ Toast.makeText(this@girish,"Xoş gəlmişsiniz",Toast.LENGTH_SHORT).show() val qarra = Intent(applicationContext,esas::class.java) startActivity(qarra) finish() }else{ Toast.makeText(this@girish,"Giriş uğursuz oldu",Toast.LENGTH_SHORT).show() } } }) } } }



    package com.example.easfood

    import android.content.Context
    import android.content.Intent
    import android.content.SharedPreferences
    import android.support.v7.app.AppCompatActivity
    import android.os.Bundle
    import android.widget.Toast
    import com.google.android.gms.tasks.OnCompleteListener
    import com.google.android.gms.tasks.Task
    import com.google.firebase.auth.AuthResult
    import com.google.firebase.auth.FirebaseAuth
    import kotlinx.android.synthetic.main.activity_girish.*


    class girish : AppCompatActivity() {

        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_girish)

            qeydiyyatbutonu.setOnClickListener {

                startActivity(Intent(this,qeydiyyat::class.java))

            }
            Gbuton.setOnClickListener {
                FirebaseAuth.getInstance().signInWithEmailAndPassword(Gnomre.text.toString(),Gsifre.text.toString())
                    .addOnCompleteListener(object:OnCompleteListener<AuthResult>{
                        override fun onComplete(p0: Task<AuthResult>) {
    if (p0.isSuccessful){

        Toast.makeText(this@girish,"Xoş gəlmişsiniz",Toast.LENGTH_SHORT).show()
        
    val qarra = Intent(applicationContext,esas::class.java)
        startActivity(qarra)
        finish()


    }else{
    Toast.makeText(this@girish,"Giriş uğursuz oldu",Toast.LENGTH_SHORT).show()
    }
                        }


                    })

                    }
            }

        }

的上下文。当您在该函数内部引用

    package com.example.easfood

    import android.content.Context
    import android.content.Intent
    import android.content.SharedPreferences
    import android.support.v7.app.AppCompatActivity
    import android.os.Bundle
    import android.widget.Toast
    import com.google.android.gms.tasks.OnCompleteListener
    import com.google.android.gms.tasks.Task
    import com.google.firebase.auth.AuthResult
    import com.google.firebase.auth.FirebaseAuth
    import kotlinx.android.synthetic.main.activity_girish.*


    class girish : AppCompatActivity() {

        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_girish)

            qeydiyyatbutonu.setOnClickListener {

                startActivity(Intent(this,qeydiyyat::class.java))

            }
            Gbuton.setOnClickListener {
                FirebaseAuth.getInstance().signInWithEmailAndPassword(Gnomre.text.toString(),Gsifre.text.toString())
                    .addOnCompleteListener(object:OnCompleteListener<AuthResult>{
                        override fun onComplete(p0: Task<AuthResult>) {
    if (p0.isSuccessful){

        Toast.makeText(this@girish,"Xoş gəlmişsiniz",Toast.LENGTH_SHORT).show()
        
    val qarra = Intent(applicationContext,esas::class.java)
        startActivity(qarra)
        finish()


    }else{
    Toast.makeText(this@girish,"Giriş uğursuz oldu",Toast.LENGTH_SHORT).show()
    }
                        }


                    })

                    }
            }

        }

时，您现在是在指该函数的上下文，而不是this类（this将驻留在其中））。

任何简单的解决方法是改用arrow function –不会重新绑定Square的上下文。

this.props

Answer 3

您需要设置点击处理程序函数的上下文，以便它引用正确的this。可以通过以下任一方式完成

使用箭头功能

() => alert("Youve clicked box " + this.props.value)

明确绑定

function() {
  alert("Youve clicked box " + this.props.value);
}.bind(this)

关于为什么需要这样做的有用资源here

将反应值传递给JS Alert

3 个答案: