如何在单击时更改按钮文本

Question

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;

我写了这个 function 将 id 的值从“Test”更改为“ok”，但我不知道为什么它不起作用。 当我使用 onclick="but()" 而不是 onclick={but} 时，它说 function but() 未使用。 我不是为什么这不起作用。 请帮忙

Answer 1

这就是你在 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;

Answer 2

添加到我的评论中，您的代码用钩子重新实现。

 import React, { useState } from "react";
 
 function ToDoItem(props) {

   const [value, setValue] = useState('Test');
 
   function but(){
     setValue('ok');
   }
 
 
   return (
     <div>
       <li>{props.text} <button class="deletebtn" onClick={() => {
         props.onChecked(props.id);
       }}><span>Delete</span></button>
      
       </li>
 
         
       <hr/>
 
       <input type="button" value={value} id="testBtn" onclick={but}/>
       
    
     </div>
   );
 }
 
 export default ToDoItem;