Reactjs 如何将按钮值传递给react中的函数

我希望在点击按钮X时，它的值X传递到结果函数（与O相同），在那里我可以将它存储在一个变量中。我不知道如何在调用结果时传递这个值并在那里访问它。我试图找到许多答案，但没有一个有效。 我是个全新的反应者。请帮忙！！谢谢 这是一段代码

import React, { Component } from 'react';

import './App.css';
import { Link } from 'react-router-dom';



class App extends Component {

  render() {
    return (
      <div>
      <h1 align="center">Welcome to TicTacToe</h1>
      <br></br><br></br><br></br><br></br>
      <div class="front">
      Choose your sign !!
      <CheckBox type='submit' value='X' id='x' onSubmit={'how to pass value'}/>
      <CheckBox type='submit' value='O' id='o' onSubmit={'how to pass value'}/>
      </div>
      <br></br>
      <Link to= "game"><p class="wrap"><button class="button">GO</button></p></Link>
      {this.props.children}
      </div>
    );
  }
}


class CheckBox extends Component{
 result(i){
   //what to access value
 }



  render(){
    return (
    <div className={'check-field'}>
    <button type={this.props.type} value={this.props.value} name={this.props.name} id={this.props.id}>{this.props.value}</button>
    </div>
  );
  }
}

export default App;

import React，{Component}来自'React'；
导入“/App.css”；
从'react router dom'导入{Link}；
类应用程序扩展组件{
render（）{
返回(
欢迎来到蒂克塔克托










选择你的星座！！



GO
{this.props.children}
);
}
}
类复选框扩展组件{
结果（一）{
//什么是访问值
}
render（）{
返回(
{this.props.value}
);
}
}
导出默认应用程序；

我不确定是否正确理解了您的问题，但要从其父级中的子输入组件（input/button/textarea）获取值，只需传递一个带有函数的道具，该函数将在任何

onClick

/

onChange

回调函数的子级中调用。这里有一个小例子：

类应用程序扩展了React.Component{
onSubmit（值）{
//我这里有按钮值！
console.log（值）；
}
render（）{
报税表（
)
}
}
类按钮扩展了React.Component{
onClick（事件）{
常量值=event.target.value；
this.props.onSubmit（值）；
}
render（）{
返回(
这个.onClick（e）}>
{this.props.value}
);
}
}
ReactDOM.render(
,
document.getElementById（'app'）
);
我不确定是否正确理解了您的问题，但要从其父级中的子输入组件（input/button/textarea）获取值，只需传递一个带有函数的道具，该函数将在任何
onClick
/
onChange
回调函数的子级中调用。这里有一个小例子：


类应用程序扩展了React.Component{
onSubmit（值）{
//我这里有按钮值！
console.log（值）；
}
render（）{
报税表（
)
}
}
类按钮扩展了React.Component{
onClick（事件）{
常量值=event.target.value；
this.props.onSubmit（值）；
}
render（）{
返回(
这个.onClick（e）}>
{this.props.value}
);
}
}
ReactDOM.render(
,
document.getElementById（'app'）
);
您可以在应用程序状态中存储每个复选框的值。然后，当checkbox是subimtted值时，它将调用handleSubmit，事件参数e保存checkbox的值和id。在您的例子中，您可以检查它是X还是Y，并相应地设置状态。这将重新呈现通过道具获得正确值的复选框

import React, { Component } from 'react';
import './App.css';
import { Link } from 'react-router-dom';


class App extends Component {
  state = {
     X : false,
     Y : false
  }
  handleSubmit = (e) => {
     if(e.target.id === 'x') {
       this.setState({X:true});
     } else {
       this.setState({Y:true});
     }
  }
  render() {
    const { X,Y } = this.state;
    return (
      <div>
        <h1 align="center">Welcome to TicTacToe</h1>
        <br></br><br></br><br></br><br></br>
       <div class="front">
          Choose your sign !!
         <CheckBox type='submit' value={X} id='x' onSubmit={this.handleSubmit}/>
         <CheckBox type='submit' value={Y} id='o' onSubmit={this.handleSubmit}/>
      </div>
      <br></br>
      <Link to= "game"><p class="wrap"><button class="button">GO</button></p></Link>
      {this.props.children}
     </div>
    );
  }
}

class CheckBox extends Component{
 render(){
    const {value, type, name, id} = this.props;
    return (
       <div className={'check-field'}>
         <button type={type} value={value} name={name} id={id}>{value}</button>
       </div>
    );
  } 
}

export default App;

import React，{Component}来自'React'；
导入“/App.css”；
从'react router dom'导入{Link}；
类应用程序扩展组件{
状态={
X:错，
Y:错
}
handleSubmit=（e）=>{
如果（e.target.id=='x'）{
this.setState（{X:true}）；
}否则{
this.setState（{Y:true}）；
}
}
render（）{
常数{X，Y}=this.state；
返回(
欢迎来到蒂克塔克托










选择你的星座！！



GO
{this.props.children}
);
}
}
类复选框扩展组件{
render（）{
const{value，type，name，id}=this.props；
返回(
{value}
);
} 
}
导出默认应用程序；
您可以在应用程序状态中存储每个复选框的值。然后，当checkbox是subimtted值时，它将调用handleSubmit，事件参数e保存checkbox的值和id。在您的例子中，您可以检查它是X还是Y，并相应地设置状态。这将重新呈现通过道具获得正确值的复选框

import React, { Component } from 'react';
import './App.css';
import { Link } from 'react-router-dom';


class App extends Component {
  state = {
     X : false,
     Y : false
  }
  handleSubmit = (e) => {
     if(e.target.id === 'x') {
       this.setState({X:true});
     } else {
       this.setState({Y:true});
     }
  }
  render() {
    const { X,Y } = this.state;
    return (
      <div>
        <h1 align="center">Welcome to TicTacToe</h1>
        <br></br><br></br><br></br><br></br>
       <div class="front">
          Choose your sign !!
         <CheckBox type='submit' value={X} id='x' onSubmit={this.handleSubmit}/>
         <CheckBox type='submit' value={Y} id='o' onSubmit={this.handleSubmit}/>
      </div>
      <br></br>
      <Link to= "game"><p class="wrap"><button class="button">GO</button></p></Link>
      {this.props.children}
     </div>
    );
  }
}

class CheckBox extends Component{
 render(){
    const {value, type, name, id} = this.props;
    return (
       <div className={'check-field'}>
         <button type={type} value={value} name={name} id={id}>{value}</button>
       </div>
    );
  } 
}

export default App;

import React，{Component}来自'React'；
导入“/App.css”；
从'react router dom'导入{Link}；
类应用程序扩展组件{
状态={
X:错，
Y:错
}
handleSubmit=（e）=>{
如果（e.target.id=='x'）{
this.setState（{X:true}）；
}否则{
this.setState（{Y:true}）；
}
}
render（）{
常数{X，Y}=this.state；
返回(
欢迎来到蒂克塔克托










选择你的星座！！



GO
{this.props.children}
);
}
}
类复选框扩展组件{
render（）{
const{value，type，name，id}=this.props；
返回(
{value}
);
} 
}
导出默认应用程序；
给出的答案很好地解释了您的基本需求。我建议您在尝试编写一些复杂的React代码之前，只需稍微深入地阅读文档并遵循React教程。对于您的问题，您的复选框的设计不清楚，我们不能通过这样查看您的代码来说明更多内容。同样，@sarneeh的答案对于标准程序来说已经足够好了。给出的答案很好地解释了你的基本需求。我建议您在尝试编写一些复杂的React代码之前，只需稍微深入地阅读文档并遵循React教程。对于您的问题，您的复选框的设计不清楚，我们不能通过这样查看您的代码来说明更多内容。再说一次，@sarneeh的回答对于标准程序来说已经足够好了。非常感谢！！我开始了解这个问题。现在一切正常！！！：）谢谢！！我开始了解这个问题。现在一切正常！！！：）