为什么我不能用 getElementById().value 设置文本？

Question

        <div className="mb-3 form-check">
            <input type="checkbox" className="form-check-input" id="exampleCheck1" />
            <label className="form-check-label" htmlFor="exampleCheck1" id="suca">
            Accetto di vedere peni
            </label>
        </div>
        <button type="submit" className="btn btn-primary" onClick={(event)=>
{document.getElementById("suca").value="lol";
props.onVamo(document.getElementById("Username").value,document.getElementById("NumeroStanza").value,event)}}> 
                    Vamo
        </button>

Why document.getElementById("suca").value="lol"; why doesn't this actually set the text to "lol"? I don't get it..

Answer 1

Besides "the react way" considerations, value is a valid atteibute for inputs/textareas, labels and other html elements have innerHTML

document.getElementById("blyat").innerHTML = "I have changed;";

Answer 2

As Konrad mentioned its very dangerous to change your HTML in a reactive environment:

React.js: Set innerHTML vs dangerouslySetInnerHTML

You should set this elements value to a variable, and change the variable:)

I also suggest using dangerouslySetInnerHTML :

dangerouslySetInnerHTML is a property that you can use on HTML elements in a React application to programmatically set their content. Instead of using a selector to grab the HTML element, then setting its innerHTML, you can use this property directly on the element.