Question

我目前正在尝试在textarea中实现onCopy处理程序，该处理程序根据onCopy事件更改textarea的值。据我所知，在系统进行实际复制之前，我已经失去了对文本区域的关注，这意味着在复制时实际上没有选择任何文本。

在下面的代码段中，我希望“复制文本框”出现在我的复制缓冲区中，但是什么也没有发生。旧值或新值都不会出现在我的复制缓冲区中。

我的问题不是专门关于复制旧值或新值，无论哪种都可以接受。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { text: 'Copy the textbox!' };
  }

  render() {
    return (
        <input
          type="textarea"
          value={this.state.text}
          onCopy={() => {
            this.setState({ text: 'Copied!' });
            return true;
          }}
          onChange={() => console.log("input.onChange")}
        />
    );
  }
}

ReactDOM.render(<App />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 1

您接受包括setTimeout的解决方案吗？：）

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { text: 'Copy the textbox!' };
  }

  render() {
    return (
        <input
          type="textarea"
          value={this.state.text}
          onCopy={() => setTimeout( () =>
            this.setState({ text: 'Copied!' }),
            100 )
          }
          onChange={() => console.log("input.onChange")}
        />
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

但是，使用setState设置值会阻止复制真的很奇怪。起初，我以为setState是这里的问题，但是如果我们设置另一个随机状态属性，我们可以复制旧值。

如何在将textarea的值放入复制缓冲区的同时使用onCopy更改textarea的值

1 个答案: