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">

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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