Hola a todos, tengo el siguiente código .
Estoy tratando de hacer lo siguiente.
Cuando elijo algunas opciones de la segunda entrada y luego cambio los valores seleccionados de la primera entrada, los segundos valores de entrada deberían eliminarse.
Intento useState hook, pero no ayuda, la segunda entrada no cambia defaultValue a undefined .
¿Cómo puedo resolver eso?
Aquí está mi código:
import { Select } from "antd"; const { Option } = Select; const children = []; for (let i = 10; i < 36; i++) { children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>); } const SelectSizesDemo = () => { const [clearAll, setClearAll] = useState(undefined); const handleChange = () => { setClearAll(undefined); }; return ( <> <Select defaultValue="a1" onChange={handleChange} style={{ width: 200 }}> {children} </Select> <Select mode="tags" placeholder="Please select" defaultValue={clearAll} onChange={handleChange} style={{ width: "100%" }} > {children} </Select> </> ); }; ReactDOM.render(<SelectSizesDemo />, document.getElementById("container"));Realmente no tiene claro lo que quiere en su pregunta, pero aquí hay una respuesta.
EDITAR: Has explicado tan horriblemente tu pregunta. No estoy seguro de si desea o no eliminar todas las opciones en la segunda selección cuando se selecciona una en la parte superior, o si desea eliminar TODAS las opciones, o simplemente eliminar la que está seleccionada. Entonces, aquí están ambas soluciones. ¿Qué quiere decir exactamente con "Necesito simplemente no mostrar nada en la segunda entrada de selección" ?
Eliminar todo de la selección inferior cuando uno en la parte superior tiene una selección:
import React, { useState } from "react"; import ReactDOM from "react-dom"; import "antd/dist/antd.css"; import "./index.css"; import { Select } from "antd"; const { Option } = Select; const children = []; for (let i = 10; i < 36; i++) { children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>); } const SelectSizesDemo = () => { const [selected, setSelected] = useState(false); const handleChange = () => { setSelected(true); }; return ( <> <Select defaultValue="a1" onChange={handleChange} style={{ width: 200 }}> {children} </Select> <Select mode="tags" placeholder="Please select" style={{ width: "100%" }}> {!selected ? children : null} </Select> </> ); }; ReactDOM.render(<SelectSizesDemo />, document.getElementById("container"));Eliminar solo el seleccionado en la parte superior desde la parte inferior:
import React, { useState } from "react"; import ReactDOM from "react-dom"; import "antd/dist/antd.css"; import "./index.css"; import { Select } from "antd"; const { Option } = Select; const children = []; for (let i = 10; i < 36; i++) { children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>); } const SelectSizesDemo = () => { const [selectedOption, setSelectedOption] = useState(null); const handleChange = (val) => { setSelectedOption(val) }; return ( <> <Select defaultValue="a1" onChange={handleChange} style={{ width: 200 }}> {children} </Select> <Select mode="tags" placeholder="Please select" style={{ width: "100%" }}> {children.filter(obj => obj.key !== selectedOption)} </Select> </> ); }; ReactDOM.render(<SelectSizesDemo />, document.getElementById("container"));Compruebe el último que funciona en CodeSandbox: https://codesandbox.io/s/sizes-antd-4-18-3-forked-ut8qp?file=/index.js