Question

我希望在单击按钮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;

Answer 1

我不确定我是否正确理解你的问题，但是要从父输入组件中获取一个子输入组件（输入/按钮/ textarea）的值，只需传递一个带有将在子组件中调用的函数的prop。在任何onClick / onChange回调函数上。这是一个小例子：

class App extends React.Component {
  onSubmit(value) {
    // I have the button value here!
    console.log(value);
  }
  
  render() {
    return (    
      <div>
        <Button value="X" onSubmit={this.onSubmit} />
        <Button value="O" onSubmit={this.onSubmit} />
      </div>
    )
  }
}

class Button extends React.Component {
  onClick(event) {
    const value = event.target.value;
    this.props.onSubmit(value);
  }

  render() {
    return (
      <button value={this.props.value} onClick={e => this.onClick(e)}>
        {this.props.value}
      </button>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app" />

我希望这能解决你的问题！

Answer 2

您可以在App的状态下存储每个复选框值。然后，当checkbox为subimtted值时，它将调用handleSubmit，而事件参数e将保存checkbox和id的复选框。在您的情况下，您可以相应地检查它的X或Y和setState。这将重新呈现将通过道具获得正确值的复选框。

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;

如何将按钮的值传递给函数中的反应

2 个答案: