javascript - 输入函数时如何在 React 中禁用按钮

Question

我正在尝试使用按钮类型的输入制作一个表格，当我们单击一个按钮时，它将采用一个值（'1'或'2'），有四个按钮，当前两个按钮采用值时' 1'，它会进入一个函数，它返回一个h2：'Values are equal'，我想做的是，一旦它返回我的值是相等的，不允许我点击按钮即没有值，也就是说一个按钮，我希望它一旦进入equalsValues函数就不允许它取任何值，我尝试了几种方法但它没有像我预期的那样出来

import './App.css';
import Table from './Table'

function App() {
  return (
    <div className="App">
   
   <Table></Table>
    </div>
  );
}

export default App;

import React from 'react'
import Buttons from './Buttons'

class Table extends React.Component {

    constructor(props){
        super(props);
        this.state={
            clickButtons:["","","",""],
            currentMove: true
        };

        this.moveCurrentButtons = this.moveCurrentButtons.bind(this);
    }

    moveCurrentButtons (idx){
      let index = parseInt(idx)
      let storedValue = this.state.clickButtons[index]
      if(storedValue.length !==0){
          alert("Not permit")
          return;
      }
      let value = this.state.currentMove ? "1": "2"
      let clickButtons = this.state.clickButtons
      clickButtons[index] = value
      this.setState({
          currentMove: !this.state.currentMove,
          clickButtons: clickButtons
      })

      this.equalsValues()

    }



    equalsValues () {
        if (this.state.clickButtons[0] === '1' && this.state.clickButtons[1]==="1"){
            return (
                <div><h2>Values equals</h2></div>
            )
        } else {
            return (
                <div><h2>Not values equals</h2></div>
            )
        }
    
    }

    render (){


        return (

           
            <div>
                 <table>
                <tr><td><Buttons index={0}  value={this.state.clickButtons[0]} handleClick={this.moveCurrentButtons}></Buttons></td><td><Buttons index={1} value={this.state.clickButtons[1]} handleClick ={this.moveCurrentButtons}></Buttons></td></tr>
                <tr><td><Buttons index={2}  value={this.state.clickButtons[2]} handleClick={this.moveCurrentButtons}></Buttons></td><td><Buttons index={3} value={this.state.clickButtons[3]} handleClick ={this.moveCurrentButtons}></Buttons></td></tr>
            </table>
                {this.equalsValues()}
            </div>
            

        )
    }

}

export default Table;

import React from 'react'

class Buttons extends React.Component {
    render (){
        return (
            <input type="button" value={this.props.value} onClick={()=> this.props.handleClick(this.props.index)} ></input>
        )
    }
}

export default Buttons;

标签： javascriptreactjsbuttoninput