Cuando el valor de stock en la matriz Product es menor que 0 o 1, quiero deshabilitar ese valor en las opciones para que no se pueda seleccionar (disable =true) Y si el stock del producto es mayor que 0, quiero poder para seleccionar ese valor. (deshabilitar = falso) ¿Qué debo hacer?
import React, {useState} from 'react' import {Form, Button} from 'antd' const Products = [ { key: 1, value: "A", stock: 0 }, { key: 2, value: "B", stock: 1 }, { key: 3, value: "C", stock: 2 }, { key: 4, value: "D", stock: 0 }, { key: 5, value: "E", stock: 0 }, { key: 6, value: "F", stock: 3 }, { key: 7, value: "G", stock: 4 }, ] function ProductPage() { // States const [product, setProduct] = useState(1) // initial value : 1 // Handlers const productChangeHandler = (event) => { setProduct(event.currentTarget.value) } return ( <div style={{ maxWidth: '700px', margin: '2rem auto' }}> <div style={{textAlign: 'center', marginBottom: '2rem'}}> <h2>Product Soldout State</h2> </div> <Form> {/* DropZone */} <br /> <br /> <select onChange={productChangeHandler} value={product} > {Products.map(item => ( <option key={item.key} value={item.key} >{item.value}</option> ))} </select> <Button>Upload</Button> </Form> </div> )}
exportar página de producto predeterminada
Use la propiedad JSX disabled , que se asigna al disabled deshabilitado: disabled={item.stock < 1}
En contexto:
{Products.map(item => ( <option key={item.key} value={item.key} disabled={item.stock < 1}>{item.value}</option> ))}Ejemplo más mínimo:
const options = [ {value: 1, stock: 40, text: "Plenty"}, {value: 2, stock: 1, text: "Just enough"}, {vlaue: 3, stock: 0, text: "None"}, ]; const Example = () => { return <select> {options.map((option) => ( <option value={option.value} disabled={option.stock < 1}>{option.text}</option> ))} </select>; }; const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<Example />); <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>