0
196
Views¿Cómo puedo vincular el valor seleccionado de un menú desplegable en cascada a una etiqueta h1 en Ant Design?
Estoy usando Ant Design para crear un menú desplegable en cascada. Estoy buscando devolver el valor seleccionado como una etiqueta para mostrar algo como "Usted seleccionó {nombre}". ¿Cómo puedo vincular el valor seleccionado a la etiqueta h1? Aquí está el código hasta ahora:
const options = [ { value: 'Person', label: 'person', children: [ { value: 'amy', label: 'Amy', }, { value: 'john', label: 'John' } ], } ]; function onChange(value, selectedOptions) { console.log(value, selectedOptions); } function filter(inputValue, path) { return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1); } class CascadingDropdown extends Component{ render(){ return( <div> <p>Please select a person:</p> <div> <Cascader options={options} onChange={onChange} placeholder="Please select" showSearch={{ filter }} onSearch={value => console.log(value)} /> </div> <h1>You selected {name}</h1> // here is where I want to print the name </div> ); } } export default CascadingDropdown;
·
Juan Pablo Isaza
1 answers
Answer question0
Use can use state para mostrar el valor seleccionado como se muestra en el siguiente código
const options = [ { value: 'Person', label: 'person', children: [ { value: 'amy', label: 'Amy', }, { value: 'john', label: 'John', }, ], }, ]; class CascadingDropdown extends Component { onChange(value, selectedOptions) { console.log(value, selectedOptions); if (value != undefined) { this.setState({ name: value[1].toString() }); } } filter(inputValue, path) { return path.some( (option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1 ); } constructor(props) { super(props); this.state = { name: '', }; } render() { return ( <div> <p>Please select a person:</p> <div> <Cascader options={options} onChange={this.onChange.bind(this)} placeholder="Please select" showSearch={this.filter} onSearch={(value) => console.log(value)} /> </div> <h1>You selected {this.state.name}</h1> </div> ); } }Captura de pantalla:
·
Juan Pablo Isaza
Report
Answer question