1

Задача: Есть select в option вывожу через map наименования(name) из объекта и меняю действующий state. После выбора option хочу вывести выбранный Option на экран(<p>{this.props.valueSelect}</p>), но он не отображается.

Компанент

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

class App extends Component {

constructor(){
  super();

  this.state = {
    monument: [{
      "id" : 1,
      "name": "Памятник №1",
      "color": ["Blue","Red", "White"],
      "width": 300,
      "heigth": 100,
      "price": 50,
      "country": "Russia",
      "url": "https://i.ibb.co/Nx8k7NJ/pam1.png"
    },
    {
      "id" : 2,
      "name": "Памятник №2",
      "color": ["Blue","Red", "White"],
      "width": 300,
      "heigth": 100,
      "price": 50,
      "country": "Russia",
      "url": "https://i.ibb.co/Nx8k7NJ/pam1.png"
     }],
    valueSelect: " "
  }
}

  render() {
    return (
      <>
      <List 
        monumentObj = {this.state.monument}
        valueSelect = {this.state.valueSelect}
      />
      </>
    );
  }
}

Компонент Select.js

export default App;
import React, { Component } from 'react';
export default class Select extends Component {

handleChange = (e) => {
    this.setState({
        valueSelect: e.target.value
    }, () => console.log(this.state.valueSelect))
    this.forceUpdate();
}
render () {
    return (
        <select value = {this.props.valueSelect} onChange={this.handleChange} >
            {
                this.props.monumentObj.map(i => {
                    return(
                        <option key={i.id} value = {i.name}>{i.name}</option>
                    )
                })
            }
        </select>

    )
};
}

Компонент

import React, { Component } from 'react';
import Collage from './Collage'
import Select from './Select'

export default class List extends Component {


  render() {
      return (
        <div className="List">
          <Select 
            monumentObj = {this.props.monumentObj} 
          />
          <Collage 
           monumentObj = {this.props.monumentObj}
           valueSelect = {this.props.valueSelect}
          />
        </div>
      );

  }
}

Компонент

import React, { Component } from 'react';
export default class Collage extends Component {

    render () {
        return (
            <div>
            {
                this.props.monumentObj.map(i => {
                    return (
                        <>
                        <h3>{i.name}</h3>
                        <p>{this.props.valueSelect}</p>
                        </>
                    )
                })
            }
            </div>
        )
    };
}

2 ответа 2

1

Ваша ошибка в том, что вы прописываете в state компонента Select выбранное значение, а отображаете значение из props внутри своего компонента Collage которое принадлежит state компонента App.


Решение проблемы: перенесите метод handleChange в компонент App и передайте его через props в компонент List вот так:

class App extends Component {

  constructor(){
    super();

    this.state = {
      monument: [{ ... some values here ... } ],
      valueSelect: "",
    }

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange = (e) => {
    this.setState({
        valueSelect: e.target.value
    }, () => console.log(this.state.valueSelect));
  }

  render() {
    return (
      <>
      <List 
        monumentObj = {this.state.monument}
        valueSelect = {this.state.valueSelect}
        onSelectValue = {this.handleChange}
      />
      </>
    );
  }
}

В компоненте List пробросьте этот метод дальше в компонент Select откуда вы ранее его вынесли:

export default class List extends Component {

  render() {
      return (
        <div className="List">
          <Select 
            monumentObj = {this.props.monumentObj} 
            onSelectValue = {this.props.onSelectValue}
          />
          <Collage 
           monumentObj = {this.props.monumentObj}
           valueSelect = {this.props.valueSelect}
          />
        </div>
      );
  }
}

И привяжите на onChange свой метод this.props.onSelectValue вот так:

export default class Select extends Component {

  render () {
    return (
      <select value = {this.props.valueSelect} onChange={this.props.onSelectValue} >
        {
          this.props.monumentObj.map(i => {
            return(<option key={i.id} value = {i.name}>{i.name}</option>)
          })
        }
      </select>
    )
  };
} 

то есть вызовется метод из List который передан через props из компонента App.

0

Согласно документации на React property для компонента не могут изменятся в компоненте.

Вам нужно метод handleChange перенести на верхний уровень и спускать этот метод как property в дочерние компоненты.

Только не забудьте сделать bind

В приведенном ниже примере я использовал 3 класса -

  • Родительский класс с обработчиком
  • Дочерний класс, принимающий переменную состояния родительского класса как параметр
  • Дочерний класс, принимающий метод изменения состояния родительского класса как параметр

При нажатии на кнопку вызывается метод, который меняет состояние в родительском классе. Это состояние, в свою очередь, реактивно передается первому дочернему компоненту, который и отображает изменение этого состояния на экране.

class FirstComponent extends React.Component {
  render(){
    var {selected} = this.props;
    return <h1> Selected - {selected} </h1>
  }
}

class ButtonWithCallback extends React.Component {
  render(){
     var {handler} = this.props;
     
     return (<button onClick={() => {handler("This Button Rules!")}}> Click Me </button>);
  
  }
}



class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {
       selected: ""
    }
    this.handleSelect = this.handleSelect.bind(this);
  }
  
  handleSelect(newValue){
    this.setState({selected: newValue});
  }
  
  render() {
    var {selected} = this.state;
    return (
      <div>
       <FirstComponent selected={selected}/>
       <ButtonWithCallback handler={this.handleSelect} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('react-root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="react-root">

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.