如何在 React Js 中通过提示更改状态值？

Question

When I write smth in prompt I want it to change Hayko value... It means, when you open it in browser, it shows cragravorox, after this II want prompt to change that value of Hayko...

const Count = () => {
   const [Hayko, setHayko] = useState('cragoravorox')

   return(
      <>
      <div>{Hayko}</div>
      <button onClick={() => {prompt(('enter my name') )}}> Change me </button>
      </>
   )

}
export default Count

Answer 1

Found an example of Dacre Denny here

 const enteredName = prompt('Please enter your name') // Integrating this with your existing react component can be done in a number of ways - one approach might be as follows: /* Definition of handleClick in component */ handleClick = (event) => { /* call prompt() with custom message to get user input from alert-like dialog */ const enteredName = prompt('Please enter your name') /* update state of this component with data provided by user. store data in 'enteredName' state field. calling setState triggers a render of this component meaning the enteredName value will be visible via the updated render() function below */ this.setState({ enteredName : enteredName }) } render: function() { return ( <div> {/* For demonstration purposes, this is how you can render data previously entered by the user */ } <p>Previously entered user name: { this.state.enteredName }</p> <input type="text" onChange={ this.handleChange } /> <input type="button" value="Alert the text input" onClick={this.handleClick} /> </div> ); } });

Answer 2

set the prompt value to a variable

const promptValue = prompt(('enter my name')

and than Use it in the sethayko(promptValue) hook onClick like

<button onClick={() => sethayko(promptValue)}> Change me </button>

Answer 3

You could simply do:

const Count = () => {
  const [Hayko, setHayko] = useState('foo');

  return (
    <>
      <div>{Hayko}</div>
      <button onClick={() => setHayko(prompt('enter my name'))}>Change me</button>
    </>
  );
}

No comment on the aesthetics of using prompt :)

Answer 4

You're partway there. You're just missing that you need to use the value returned by the prompt call - that will be the value the user enters - and then set the state to that. Here's how to do it with minimal alteration:

const Count = () => {
   const [Hayko, setHayko] = useState('cragoravorox')

   return(
      <>
          <div>{Hayko}</div>
          <button onClick={() => setHayko(prompt('enter my name'))}> Change me </button>
      </>
   )

}
export default Count

But that's not the easiest to read, so you might want a separate function called something like handleClick that makes it clearer what's going on:

const Count = () => {
   const [Hayko, setHayko] = useState('cragoravorox')

   const handleClick = () => {
       const newHayko = prompt(('enter my name'))
       setHayko(newHayko)
   }

   return(
      <>
          <div>{Hayko}</div>
          <button onClick={handleClick}}> Change me </button>
      </>
   )

}
export default Count