[英]How to change the button text on click
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;
I wrote this function to change the value of the id from from "Test" to "ok", but I donot know why it is not working.我写了这个 function 将 id 的值从“Test”更改为“ok”,但我不知道为什么它不起作用。 When I use onclick="but()" instead of onclick={but}, it says the function but() is unused.
当我使用 onclick="but()" 而不是 onclick={but} 时,它说 function but() 未使用。 I am not why is this not working.
我不是为什么这不起作用。 Please help
请帮忙
This is how you do it in React.这就是你在 React 中的做法。 You dont mix react, with DOM manipulation:
你不混合反应,与 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;
And an, update for follow-up question.还有一个后续问题的更新。 With the styling it depends what kind of styling you use in your react application.
样式取决于您在 React 应用程序中使用的样式。 But you could use inline styling to get the behaviour you want.
但是您可以使用内联样式来获得您想要的行为。 I for one use styled components when working in React...here's an updated code.
我在 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;
Adding to my comments, your code reimplemented with hooks.添加到我的评论中,您的代码用钩子重新实现。
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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.