Копировать в буфер обмена после выделения мышью текста в reactjs - PullRequest
Новая
       35

Копировать в буфер обмена после выделения мышью текста в reactjs

0 голосов
/ 28 апреля 2020

Можем ли мы показать копию в буфер обмена после выбора мышью некоторого текста в reactjs?

Я ищу копию в буфер обмена для моей формы, поскольку в первом разделе есть две части. Я показываю некоторое содержимое а во второй части есть поля формы. Так что в первом разделе после выделения мышью некоторого текста мы можем показать кнопку для копирования в буфер обмена в конце выделения?

например
В мобильном браузере после выделения некоторого текста одним щелчком вверх, он показывает параметры, такие как копировать, вставить, вырезать.

Так же, как мы можем сделать это с помощью выделения мышью?

После копирования мы можем вставить этот текст в соответствующее поле.

Вот мой jsfiddle

Код: 

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        fName: '',
      lName: '',
      add: ''
    }
  }

  onChange = (event) => {
  this.setState({ 
  [event.target.name]: event.target.value 
  });
  }
  render() {
    return (
      <div>
        <h2>Custom Copy Paste</h2>
     <div className="row w-100 border-info">

        <div id="copyArea" className="col w-50 border border-primary">
        <p>
          First Name: Herry Villiyam <br/>
          Last  Name: Smith Potter <br/><br/>
          Address President's Inaugural speech. 123 Main Street, New York, NY 10030 <br/><br/>
          To be an excellent professional and to be a part of an organization which provides constant learning of latest technological upgrades, and provides career growth.<br/><br/>
Summary

Total year of work experience 2.1 Year.
Experience:Date from 5 th April 2017 to 16 th May 2019

COMPANY : Wlow Private Limited

        </p>
        </div>

        <div id="pasteArea" className="col w-50 border border-success ">
            <div>
                <div className="mt-1">

                  First Name: <input  value={this.state.fname} type="text"     id="fname" name="fname" onChange={this.onChange} /> {this.state.fname}

                </div>
                  <br/>
                 <div>

                  Last Name: <input value={this.state.lname} type="text"         onChange={this.onChange} id="fname" name="fname"/> {this.state.lname}

                 </div>
                   <br/>

                 <div>

                 Address 1.: <textarea value={this.state.add} type="text"                              onChange={this.onChange} id="add" name="add"/>
                     {this.state.add}

                 </div>
            </div>
        </div>
  </div>
</div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

Любая помощь будет оценена.

...