RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 923652
Accepted
Дмитрий Сухоцкий
Дмитрий Сухоцкий
Asked:2020-12-21 14:37:56 +0000 UTC2020-12-21 14:37:56 +0000 UTC 2020-12-21 14:37:56 +0000 UTC

道具不显示

  • 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 2 个回答
  • 10 Views

2 个回答

  • Voted
  1. Best Answer
    Denis Bubnov
    2020-12-21T20:33:36Z2020-12-21T20:33:36Z

    您的错误是您将选定的值写入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. Serge Kior
    2020-12-21T15:33:15Z2020-12-21T15:33:15Z

    根据 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

相关问题

  • 如何更改可观察数组中的值?

  • 为什么写成普通函数的组件会返回空

  • defaultProps 与 state 有何不同?

  • 如何在 Meteor+React 应用程序中连接和使用 Yandex.Metrica?

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    是否可以在 C++ 中继承类 <---> 结构?

    • 2 个回答
  • Marko Smith

    这种神经网络架构适合文本分类吗?

    • 1 个回答
  • Marko Smith

    为什么分配的工作方式不同?

    • 3 个回答
  • Marko Smith

    控制台中的光标坐标

    • 1 个回答
  • Marko Smith

    如何在 C++ 中删除类的实例?

    • 4 个回答
  • Marko Smith

    点是否属于线段的问题

    • 2 个回答
  • Marko Smith

    json结构错误

    • 1 个回答
  • Marko Smith

    ServiceWorker 中的“获取”事件

    • 1 个回答
  • Marko Smith

    c ++控制台应用程序exe文件[重复]

    • 1 个回答
  • Marko Smith

    按多列从sql表中选择

    • 1 个回答
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Suvitruf - Andrei Apanasik 什么是空? 2020-08-21 01:48:09 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5