ReactJS выбирает элемент уникальным образом на карте - PullRequest
Новая
       15

ReactJS выбирает элемент уникальным образом на карте

0 голосов
/ 05 января 2019

Я делаю приложение todo, чтобы практиковать React. Я ударил блокиратор, и теперь я пытаюсь понять, как уникальным образом редактировать карту.

В настоящее время, когда я нажимаю на редактировать, все мои карты установлены на isEditing == true. Я попытался добавить ключ и индекс, но, похоже, не могу однозначно идентифицировать выбранную карту.

Как видно в моем GIF:

enter image description here

Очевидно, что ожидаемый результат состоит в том, что он должен установить isEditing == true только для выбранной карты.

См. Код ниже.

Для большего контекста: есть компонент с состоянием, который передает реквизиты этому компоненту, я использую react-bootstrap (отсюда Panel, Button), и я удалил некоторые код для краткости (construct и еще много чего). 

    edit() {
        this.setState({
            isEditing: true
        })
    }

    renderEditDoneButtons() {
        return (
            <div>
                <Button onClick={this.edit}>edit</Button>
            </div>
        )
    }

    renderNote(note) {
        return (
            <p> {note} </p>
        )
    }

    renderCard(note, i) {
        return (
            <Panel key={i}
                   index={i}>
                {
                    this.state.isEditing ? 
                    this.renderForm() : 
                    this.renderNote(note.note)
                }
            </Panel>
        )
    }

    render() {
        return (
            <div>
                {this.props.notes.map(this.renderCard)}
            </div>
        )
    }

Ответы [ 3 ]

0 голосов
/ 05 января 2019

Все три изменяются в зависимости от вашего единственного состояния isEditing, поэтому вы видите все три, отображаемые при нажатии любой из кнопок «Редактировать». Вместо одного isEditing ключа в состоянии используйте массив для поддержки всех трех состояний, например: 

constructor(props) {

  super(props);

  // Sets a true/false editing state for all three panels
  this.state = {
    editingPanels: Array(3).fill(false)
  }
}

edit(i) {

    // Switches editing state to false/true for given i
    const editingPanels = this.state.editingPanels.slice();
    editingPanels[i] = !editingPanels[i];

    this.setState({
        editingPanels: editingPanels
    })
}

renderEditDoneButtons(i) {
    return (
        <div>
            <Button onClick={()=>this.state.edit(i)}>edit</Button>
        </div>
    )
}

renderNote(note) {
    return (
        <p> {note} </p>
    )
}

renderCard(note, i) {
    return (
        <Panel key={i}
               index={i}>
            {
                this.state.editingPanels[i] ? 
                this.renderForm() : 
                this.renderNote(note.note)
            }
        </Panel>
    )
}

render() {
    return (
        <div>
            {this.props.notes.map(this.renderCard)}
        </div>
    )
}
0 голосов
/ 05 января 2019

Вы можете использовать отдельный компонент для каждого элемента списка задач и использовать его внутри метода map. Следующий пример дает представление о том, как реализовать это. Я использую другой пример, поскольку вы не предоставили полный код. 

class EditText extends React.Component {
  constructor(props) {
    super(props)
    this.state = {value:props.data,newValue:'hi'}
    this.editValue = this.editValue.bind(this)
  }
  editValue() {
    this.setState({value:this.state.newValue})
  }
  render() {
    return(
      <div>
      {this.state.value}
      <button onClick={this.editValue}>Change text to Hi</button>
      </div>
    )
  }
}
class App extends React.Component {
  constructor() {
    super()
    this.state = {tempDate : ['hello','how']}
  }
  render() {
    return (
      <div className="App">
      {this.state.tempDate.map(data=>(<EditText data={data}/>))}
      </div>
    );
  }
}
0 голосов
/ 05 января 2019

У вас должна быть переменная состояния isEditing для каждой конкретной карты. Если есть 3 карты, вам нужно иметь 3 переменные.

Редактировать 1: - Примером уже поделился Коди Р.

Одна вещь, которую я заметил, это то, что вместо жесткого размера массива 3 мы можем назначить размер массива по количеству нот, полученных в реквизите. 

this.state = {
    editingPanels: Array(3).fill(false)
  }

К 

this.state = {
    editingPanels: Array(this.props.notes.length).fill(false)
  }

Надеюсь, это поможет,

Ура !!

...