El siguiente es el código de inicio de nuestra aplicación. Vamos a crear un proyecto de Reacción llamado ce-app.
1npx create-react-app ce-app && cd ce-app
javascript
Lo primero es añadir dependencias para reaccionar y semántica-ui-reaccionar. El react-contenteditable es un componente útil que facilita el trabajo con el elemento contentedable.
1yarn add react-contenteditable semantic-ui-react
javascript
Si no tienes npx, instálalo ejecutando el comando: npm install -g npx. Pero si no usas npm y en su lugar usas hilo, entonces puedes usar este comando: npm i react-contenteditable semantic-ui-react.Para mantener todo simple, todo nuestro código será colocado dentro del archivo index.js. Necesitamos cargar todas las dependencias, crear el componente de la aplicación y poner algunos datos de demostración en nuestro estado. El archivo index.js debería tener un aspecto parecido al siguiente:
123456789101112131415161718192021222324252627282930313233343536373839importReact,{Componente}de$0027reaccionar$0027importarReactDOMde$0027reaccionardom$0027importarContenidoEditablede$0027reaccionarcontenido$0027importar{Tabla,Botón}de$0027semántica-ui-reaccionar$0027importar$0027. /styles.css$0027classAppextendsComponent{ initialState ={ store:[{ id:11, item:$0027bat$0027, cost:1},{ id:22, item:$0027ball$0027, cost:2},{ id:33, item:$0027badminton$0027, cost:3}], row:{ item:$0027$0027, cost:$0027$0027,},} state = this. initialStaterender(){const{ store, row:{ item, cost },}=this.statereturn(<div className="App">h1 ];Ejemplo de ReactContenteditable</h1 ];{/* La tabla se definirá aquí */}</div>)}}ReactDOM.render(<App/>,document.getElementById($0027root$0027))javascript
Los encabezados de la tabla son Item, Cost y UserAction, y cada fila tiene los mismos datos que el estado. Cada celda contiene un elemento contenible o una opción para añadir una fila o para eliminarla.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849<Table celled Fila<Tabla.CabeceraCelda&;Artículo</Tabla.CabeceraCelda&;Tabla.CabeceraCelda&;Costo</Tabla.CabeceraCelda&&;Tabla.CabeceraCelda&;Acción del Usuario</Tabla. HeaderCell{Cabecera.Celular,} /Tabla.Fila{Cabecera.} /Tabla.Cabecera{Cabeza.} /Tabla.Cuerpo{Cabecera.mapa} {store.map={fila.};{retorno(})} {tabla.} {tabla.}. item}</Tabla.Celda=;Tabla.Celda,{fila.costo}</Tabla.Celda.ClassName="narrow"<Botón onClick={()={{{{{}}. EliminarRow(row.id)}};Eliminar</Botón,};/Tabla.Celda,};/Tabla.Fila,}<Tabla.Fila.};Tabla. Celda className="narrow"/"narrow"/"ContentEditable html={item} data-column="item" className="content-editable" onChange={this.handleCE}/{[< </Table.Cell]/Table. Cell className="narrow"<<ContentEditable html={costes} data-column="cost" className="content-editable" onChange={this.handleCE}/{{[</Table.Cell]};Table. cell className="narrow"<<Botón onClick={this.addNewRow};Add</ButtonAtHola.Cell=;javascript
Estamos empezando con tres métodos. El primer método es para añadir una fila, y eliminará las entradas de la fila actual y enviará las nuevas entradas de la fila a la tienda. Otro método se utilizará para eliminar una fila.
1234567891011121314addNewRow=()=[...esto.setState((fila, almacenar })=[...return{ almacenar:[...almacenar,{...fila, id: almacenar.longitud+1}], fila:esto. initialState.row,})}removeRow=id={{this.setState(({ store })={{{N-(store: store.filter(item={N-(artículo); id !== artículo.id),}))}javascript
El tercer método es el componente handleCE. Se llamará con cada cambio en ContentEditable usando onChange. Para poder utilizar una única función para todas las columnas, tenemos un atributo data-column añadido a nuestro componente para que podamos tener la clave (columna) así como el valor de cada ContentEditable y podamos entonces establecer nuestra fila.
1234567891011handleCE=evt={{const{ row }=this.stateconst{ currentTarget:{ dataset:{ column },}, target:{ value },}= evt this.setState({ row:{...row,[column]: value }})}javascript
Abajo está el CSS añadido al proyecto para que nuestra interfaz de usuario se vea bien.
123456789101112131415161718192021222324252627282930.App{margin:10px auto;max-width:900px;font-family: sans-serif;}.ui.table td{padding:2rem;}.ui.table td.narrow{padding:0;}. ui.button{margin:01.5rem;}.content-editable{padding:1rem;}.content-editable:hover{background:#999999;}.content-editable:focus{background:#efefef;outline:0;}css
Ahora nuestra configuración está completa, y nuestra aplicación tiene una tabla y la funcionalidad de añadir una fila usando contentedable en lugar de usar una entrada o área de texto, y así podemos controlar el estilo del elemento por completo.