Question

我在下面的“简单下拉菜单”组件中

import React,{Fragment} from 'react';

export default class SimpleDropdown extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            listOpen: false,            
            selectedValue: 'calculated Measure'
        }
        this.selectedItem = this.selectedItem.bind(this);
    }

    selectedItem = (event)=> {        
      this.setState({
           selectedValue: event.target.value
      })           
    }   

    render() {
        return (
            <Fragment>
                <select className="dd-wrapper" value={this.state.selectedValue} onSelect={this.selectedItem} >
                    {this.props.list.map((item) => (
                        <option className="dd-list-item" key={item.name} value={item.name}>{item.name}</option>)
                    )}
                </select>
            </Fragment>    
        );
    }
}

我正在其他文件中使用此组件，其状态为

this.state = {
 measures: [{
                name: 'calculated Measure',
            },{
                name: 'Base Measure'
            }]
 }

<SimpleDropdown title="create Measure" list={this.state.measures} />

现在，我想将所选值从简单的下拉组件传递到此处，我该怎么做？

Answer 1

基本思想是从需要输入值的组件中创建selectedItem函数。将该函数作为道具传递给处理程序，并在需要该值的组件中更新该值。请注意，onSelect下面的人现在正在呼叫this.props.handleSelect。

import React,{Fragment} from 'react';

export default class SimpleDropdown extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            listOpen: false,                
        }
    }    

    render() {
        return (
            <Fragment>
                <select className="dd-wrapper" value={this.state.selectedValue} onSelect={this.props.handleSelect} >
                    {this.props.list.map((item) => (
                        <option className="dd-list-item" key={item.name} value={item.name}>{item.name}</option>)
                    )}
                </select>
            </Fragment>    


        );
    }
}

我根据您上面发布的内容创建了另一个组件类，以帮助阐明。但这是定义函数并将其传递到SimpleDropdown的地方。

export class TestComponent extends React.Component {
   state = {
       selectedDropDownValue: '',
       [{
           name: 'calculated Measure',
        },
        {
           name: 'Base Measure'
        }
      ]
   }

   handleDropDownSelect = (event) => {
      this.setState({ selectedDropDownValue: event.target.value });
   }

   render() {
      return <SimpleDropdown 
               title="create Measure" 
               list={this.state.measures}
               handleSelect={this.handleDropDownSelect}
             />
   }
}

希望这有所帮助！让我知道是否需要进一步澄清。

如何使用react将event.target.value从一个组件传递到另一个组件

1 个答案: