Как сделать поля привязанные к этому блоку?

Question

[vladislavprozorovskiy]

Есть такой код

import React, { Component } from 'react';
import './App.css';

class App extends Component {
    constructor(props){
        super(props)
    this.state = {
      data:[

          {
              id:"1",title:"some-text1",color:"#088A85"
          },
          {
              id:"2",title:"some-text2",color:"#0B2F3A"
          },
          {
              id:"3",title:"some-text3",color:"#0B0B3B"
          },
          {
              id:"4",title:"some-text4",color:"#2A0A29"
          },
          {
              id:"5",title:"some-text5",color:"#B4045F"
          },
          {
              id:"6",title:"some-text6",color:"#FA58F4"
          },
          {
              id:"7",title:"some-text7",color:"#A9BCF5"
          },
          {
              id:"8",title:"some-text8",color:"#58FA82"
          },
          {
              id:"9",title:"some-text9",color:"#A9F5F2"
          },
          {
              id:"10",title:"some-text10",color:"#CED8F6"
          }
      ],
        open:false
    }
    }
    toggleOpen = () =>{
    this.setState({open:!this.state.open})
}
  render() {
      var className = this.state.open? "opened" : "closed";
    return (
        <div>
            {
            this.state.data.map((block,id)=>{
                return (
                <div key={block.id} className="block" >
        
        <div style={{width:100,height:100,backgroundColor:block.color}} onClick = {this.toggleOpen}><p>{block.title} </p></div>
        
       <div className={className}>
        
             <input type="text" placeholder="color" />
             <input type="text" placeholder="text" />
        </div>
        </div>
                )
            })
            }
             
        </div>
    )
  }
}

export default App;

Нужно сделать два input-a, привязанные к этому блоку.Чтобы при клике на блок, открывались инпуты связанные с этим блоком и изменяли его значения block.color и block.title.Как лучше всего это сделать?

Answer 1

[0xD34F]

Ну, input'ы у вас уже есть, осталось только добавить обработчик onChange, в котором будет происходить обновление данных. И конечно, чтобы можно было управлять видимостью инпутов независимо, свойство, отвечающее за их отображение, должно быть не одно на все блоки, а у каждого своё:

class App extends React.Component {
  state = {
    data: [
      '#088A85', '#0B2F3A', '#0B0B3B', '#2A0A29', '#B4045F',
      '#FA58F4', '#A9BCF5', '#58FA82', '#A9F5F2', '#CED8F6',
    ].map((n, i) => ({
      id: i + 1,
      color: n,
      title: `block #${i}`,
      opened: false,
    })),
  }

  updateItem(index, key, val) {
    const data = [...this.state.data];
    data[index][key] = val;
    this.setState({ data });
  }

  render() {
    return (
      <div>{this.state.data.map(({ id, color, title, opened }, i) => (
        <div key={id}>
          <div
            className="square"
            style={{ backgroundColor: color }}
            onClick={() => this.updateItem(i, 'opened', !opened)}
          >
            <p>{title}</p>
          </div>
          {opened &&
          <div>
            <input
              value={color}
              onChange={e => this.updateItem(i, 'color', e.target.value)}
            />
            <input
              value={title}
              onChange={e => this.updateItem(i, 'title', e.target.value)}
            />
          </div>}
        </div>))}
      </div>
    )
  }
}

.square {
  width: 100px;
  height: 100px;
}