मैं फ्रेमवर्क मूल बातें सीखने के लिए रिएक्ट में एक टिक-टैक-टो गेम करने की कोशिश कर रहा हूं और मैं सोच रहा था कि मशीन को "निम्नलिखित" ईवेंट की टेक्स्ट सामग्री को कैसे बदला जाए। मेरे प्रारंभिक कार्य के बाद लक्ष्य:

onClickCardUser = (event) => {

        event.preventDefault();
        event.stopPropagation();

        event.target.textContent = 'X';

        //this.onClickCardMachine()
}

मैं वहां जो कर रहा हूं वह उस कार्ड पर "एक्स" डाल रहा है जिसे उपयोगकर्ता ने क्लिक किया है। तो एक बार "x" लिखे जाने के बाद मैं क्या करना चाहता हूं onClickCardMachine फ़ंक्शन को कॉल करें ताकि यह निम्नलिखित कार्ड पर "O" डाल सके।

कैसा कैसे करूं? मुझे इस बात में विशेष दिलचस्पी नहीं है कि क्या यह समाधान मुझे टिक-टो-गेम करने के बहुत करीब ले जाता है, लेकिन यह जानने के लिए बहुत उत्सुक था कि क्या यह किया जा सकता है।

export default class Box extends React.Component {

    onClickFichaUser = (event) => {

            event.preventDefault();
            event.stopPropagation();

            event.target.textContent = 'X';

            this.onClickFichaMachine()
    }

    onClickFichaMachine = () => {

        console.log('now machine should do an "O" ')
    }

    render() {
        return (
            <div className="box">
                <Card id={1} onClick={this.onClickFichaUser} />
                <Card id={2} onClick={this.onClickFichaUser} />
                <Card id={3} onClick={this.onClickFichaUser} />

                <Card id={4} onClick={this.onClickFichaUser} />
                <Card id={5} onClick={this.onClickFichaUser} />
                <Card id={6} onClick={this.onClickFichaUser} />

                <Card id={7} onClick={this.onClickFichaUser} />
                <Card id={8} onClick={this.onClickFichaUser} />
                <Card id={9} onClick={this.onClickFichaUser} />
            </div>
        )
    }
}

बाल तत्व:

export default class Card extends React.Component{

    render(){
        return (
            <div>
                <button id={this.props.id} onClick={this.props.onClick} className="card">{this.props.dibujo}</button>
            </div>
        )
    }
}
0
J. Cake 28 अक्टूबर 2019, 22:23

1 उत्तर

सबसे बढ़िया उत्तर

आपको इस बात का ध्यान रखना चाहिए कि वर्तमान खिलाड़ी (मशीन या उपयोगकर्ता) कौन सा है। आप अपनी घटक स्थिति का उपयोग करके ऐसा कर सकते हैं। यहाँ एक उदाहरण है:

class Card extends React.Component {

  render() {
    return (<div>
      <button id={this.props.id} onClick={this.props.onClick} className="card">{this.props.dibujo}</button>
    </div>)
  }
}

class Box extends React.Component {

  state = {
    player: 'user'
  }

  onClickFichaUser = (event) => {
    event.preventDefault();
    event.stopPropagation();
    event.target.disabled = true;
    event.target.textContent = this.state.player === 'user'
      ? 'X'
      : 'O';

    this.setState(state => ({
      player: state.player === 'user'
        ? 'machine'
        : 'user'
    }))
  }

  render() {
    return (<div className="box">
      <Card id={1} onClick={this.onClickFichaUser}/>
      <Card id={2} onClick={this.onClickFichaUser}/>
      <Card id={3} onClick={this.onClickFichaUser}/>

      <Card id={4} onClick={this.onClickFichaUser}/>
      <Card id={5} onClick={this.onClickFichaUser}/>
      <Card id={6} onClick={this.onClickFichaUser}/>

      <Card id={7} onClick={this.onClickFichaUser}/>
      <Card id={8} onClick={this.onClickFichaUser}/>
      <Card id={9} onClick={this.onClickFichaUser}/>
    </div>)
  }
}

ReactDOM.render(< Box />, document.getElementById('root'));
.box {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  grid-gap: 10px;
}

.box div {
  background-color: dodgerblue;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box div button {
  width: 50%;
  height: 50%;
  cursor: pointer;
}
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>
1
giuseppedeponte 28 अक्टूबर 2019, 19:37