Реагируйте на JavaScript - проблема setState и copyToClipboard с масштабируемой кнопкой + рендеринг - PullRequest
Новая
       28

Реагируйте на JavaScript - проблема setState и copyToClipboard с масштабируемой кнопкой + рендеринг

2 голосов
/ 15 октября 2019

Создание чат-сайта (автоответчик) для работы и трудности с настройкой состояния пары кнопка / параграф в масштабируемом рендере.

ID записано в JSON, поэтому неуникальные создания Active= и value= также получены из того же JSON.

Что я хочу сделать: я хочу иметь возможность нажать кнопку и скопировать в буфер обмена текст в абзаце с тем же ID.

CODE (соответствующие фрагменты): 

    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>

1 Ответ

0 голосов
/ 16 октября 2019

Выбрав currentTarget.value и удалив идентификатор из кнопки, я могу получить значение для каждого из сгенерированных входов и манипулировать его 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>   

  )
}
...