React Javascript - setState 问题和 copyToClipboard 问题与可缩放按钮+p 渲染

Question

为工作建立一个聊天网站（自动回复），并且在可缩放渲染中设置 button/paragraph 情侣的状态有困难。

ID写在JSON，所以非唯一创作 Active= 和 value= 也来自同一个 JSON。

我想做的事情：我希望能够单击按钮并将具有相同 ID.

的段落中的文本复制到剪贴板

代码（相关片段）：

    export default class MenuExamplePointing extends  Component  {
      state = { activeItem: 'Transfer list' } // functioning setState for MENU-select
      value = { activeItem: '1'}              // functioning setState for MENU-select
      valuetwo = { activeId: '1'}             // non-functioning setState for BUTTON/P

    Wtest(state){
      const { activeId } = this.valuetwo

    if (state.value === "1"){

    return(  
           <div className="contentHolder">
              {PostData.map((postDetail) => {
                 return  <div> 
                    <button 
                      value= {postDetail.value}
                      className="descriptive"
                      active={activeId === postDetail.value.toString()}
                      id={postDetail.value}
        //onClick={this.handleIdClick}
        //onClick={() => this.handleIdClick }
                      >
                         {postDetail.name}
                      </button>
                    <p 
                     active={activeId === postDetail.value}
                     id={postDetail.value}
                     value={postDetail.value}
                     className="insertText" >             
                     {postDetail.content}
                    </p>
                  </div>
                })}
          </div>   

     )
    }

      handleIdClick = (e, { value }) => {
         this.setState({ activeId: value })};

      handleItemClick = (e, { name, value }) => {
         this.setState({ activeItem: name, value })};

    render() {
        const { activeItem } = this.state

    return (  
      <div>

        <Menu pointing>
          <Menu.Item
            name='Transfer List'
            active={activeItem === 'Transfer List'}
            onClick={this.handleItemClick}
            value = "1"

          />
    ....

        <segment>
           <div>{this.Wtest(this.state)}</div>
        </segment>

Answer 1

通过选择 currentTarget.value 并从按钮中删除 id，我能够为每个生成的输入获取值并操作其 innerHTML (copyToClipboard)。因此，即使我没有正确回答我的问题，我也找到了一个合适且可扩展的解决方案。有兴趣的，这里是新代码：

  bar(e){
    var equals = e.currentTarget.value;
    document.getElementById(equals).innerHTML = "test";
  }

  Wtest(state){
  if (state.value === "1")
    return(  
       <div className="contentHolder">
          {PostData.map((postDetail) => {
            return  <div> 
          <button 
            value={postDetail.value.toString()}
            className="descriptive"
            onClick={this.bar}
          >{postDetail.name}
          </button>
          <p 
           id={postDetail.value}
           value={postDetail.value.toString()}
           className="insertText" >             
           {postDetail.content}
            </p>
            </div>
          })}  
      </div>   

  )
}

React Javascript - setState 问题和 copyToClipboard 问题与可缩放按钮+p 渲染

React Javascript - setState issue and copyToClipboard issue with scaleable button+p render

javascript

onclick

setstate

reactjs