Блог

я создал кнопку вместе с текстовым полем и сохранил ее значение по умолчанию как «Махеш»! Теперь мое требование заключается в том, что когда я нажимаю на КНОПКУ, текстовое поле должно становиться пустым..это означает, что значение по умолчанию должно измениться с «mahesh» на пустое!

Как я должен это сделать ?? пожалуйста, помогите мне кто-нибудь?

Изображение

 import React,{Component, createRef} from 'react';
export default class App extends Component
{
  constructor(props)
  {
    super(props)
    this.inputRef=createRef();
    this.state=
    {
    value:"Mahesh"
    }
  }
  handler=(e)=>
  {
     this.setState({value:" "});
    this.inputRef.current.focus();
  }
  render()
  {
    return(
      <div>
       <input ref={this.inputRef} type="text" value={this.state.value}></input>
        <button onClick={this.handler}>edit</button>
      </div>
    )
  }
}
 

Когда вы нажимаете на кнопку редактирования, она устанавливает значение в пустую строку. Но когда пользователь хочет что-то ввести, мы должны предоставить обработчик onChange текстовому полю. Вот рабочий код

 import React,{Component, createRef} from 'react';
export default class App extends Component
{
  constructor(props)
  {
    super(props)
    this.inputRef=createRef();
    this.state=
    {
    value:"Mahesh"
    }
    }
    
    onClickHandler = (e) =>
    {
    this.setState({value:" "});
    this.inputRef.current.focus();
    }
    
    onChangeHandler = (e) => 
    {
        this.setState({value: e.target.value})    
    }

  render()
  {
    return(
      <div>
       <input ref={this.inputRef} type="text" value={this.state.value} onChange= {this.onChangeHandler} id="box1"></input>
        <button onClick={this.onClickHandler}>edit</button>
      </div>
    )
  }
}