如何在点击时更改按钮文字

debugcn 发表于 Dev

用户名

import React from "react";

function ToDoItem(props) {

  function but(){
    document.getElementById('testBtn').value='ok'
  }


  return (
    <div 

    >
      <li>{props.text} <button class="deletebtn" onClick={() => {
        props.onChecked(props.id);
      }}><span>Delete</span></button>
     
      </li>

        
      <hr/>

      <input type="button" value="Test" id="testBtn" onclick={but}/>
      
   
    </div>
  );
}

export default ToDoItem;

我编写了此函数，将id的值从“ Test”更改为“ ok”，但我不知道为什么它不起作用。当我使用onclick =“ but（）”代替onclick = {but}时，它说函数but（）未使用。我不是为什么这不起作用。请帮忙

塔尔玛西尔·玛丽安·西尔维（Talmacel Marian Silviu）

这就是您在React中的方法。您不要将反应与DOM操作混合在一起：

import React, {useState} from "react";

function ToDoItem(props) {
  const [buttonText, setButtonText] = useState('Test');

  return (
    <div>
      <li>
        {props.text}
        <button
          class="deletebtn"
          onClick={() => {
            props.onChecked(props.id);
          }}
        >
          <span>Delete</span>
        </button>
      </li>

      <hr />

      <input
        type="button"
        value={buttonText}
        id="testBtn"
        onClick={() => setButtonText("Ok")}
      />
    </div>
  );
}

export default ToDoItem;

并更新后续问题。对于样式，它取决于您在React应用程序中使用哪种样式。但是您可以使用内联样式来获得所需的行为。我在React中使用样式组件的一种方式...这里是更新的代码。

import React, { useState } from "react";

function ToDoItem(props) {
  const [buttonText, setButtonText] = useState("Test");
  const [buttonColor, setButtonColor] = useState("red");

  const changeButton = () => {
    setButtonText(buttonText === "Test" ? "Ok" : "Test");
    setButtonColor(buttonColor === "red" ? "blue" : "red");
  };

  return (
    <div>
      <li>
        {props.text}
        <button
          class="deletebtn"
          onClick={() => {
            props.onChecked(props.id);
          }}
        >
          <span>Delete</span>
        </button>
      </li>

      <hr />

      <input
        style={{ backgroundColor: buttonColor }}
        type="button"
        value={buttonText}
        id="testBtn"
        onClick={changeButton}
      />
    </div>
  );
}

export default ToDoItem;

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。