主页 / 问题 / 923652
Accepted
Дмитрий Сухоцкий
Asked:2020-12-21 14:37:56 +0800 CST2020-12-21 14:37:56 +0800 CST

道具不显示

  • 772

任务：option里面有个select，我通过map从object中推导出名字（name），改变当前状态。选择一个选项后，我想在屏幕上显示选择的选项(<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>
        )
    };
}
reactjs

2 个回答

  1. Best Answer

    您的错误是您将选定的值写入state组件Select，但显示属于该组件的组件props内部的值。CollagestateApp

    问题的解决方案：将方法包装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传递过来的方法将被调用。propsApp

    • 1

  2. 根据 React 文档，组件的属性不能在组件中更改。

    您需要将 handleChange 方法移至顶层并将此方法作为属性拖放到子组件中。

    只是不要忘记绑定

    在下面的示例中，我使用了 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">

    • 0

相关问题