Estoy usando IconButton de material-ui y quiero cambiar el ícono del botón después del evento de clic/toque.
var tableModeElement = <IconButton key="tableModeButton" onTouchTap={() => { this.setState(prevState => ( { isCardView: !prevState.isCardView })) } }> <i className="material-icons theme-color-p1"> {this.state.isCardView ? "view_module" : "list"} </i> </IconButton> La expresión {this.state.isCardView ? "view_module" : "list"} solo se evalúa una vez y no más después de eso. Pensé que si cambio el estado, ¿forzaré un nuevo procesamiento? ¿Qué estoy haciendo mal?
EDITAR: agregó que el iconButton está asignado a una variable. Si incluyo el <IconButton> directamente en el método de procesamiento, funciona bien. Tuve que reasignar la variable para que funcionara.
Creo que esto funcionaría:
class IconButton extends React.Component { constructor(props) { super(props); this.state = { isCardView: false, } } render() { return ( <a className="btn btn-primary" onClick={()=>this.setState({ isCardView: !this.state.isCardView })}> { this.state.isCardView ? <span className="glyphicon glyphicon-remove-sign" /> : <span className="glyphicon glyphicon-ok-sign" /> } BUTTON </a> ); } } class App extends React.Component { render () { return ( <div> <IconButton /> </div> ); } } ReactDOM.render(<App/>,document.getElementById('root'));Estoy usando bootstrap, pero cualquier sistema de íconos funcionaría
Establecer el texto "view_module" o "list" en un elemento <i> no cambiará el icono del botón
Debe tener un icono anidado dentro del botón, por ejemplo:
<IconButton key="tableModeButton" onTouchTap={() => { this.setState({ isCardView: !this.state.isCardView }) }}> {this.state.isCardView ? <IconA /> : <IconB /> } </IconButton>Esto es lo mejor que se me ocurrió:
<IconButton key="tableModeButton" onTouchTap={(e) => { let show = this.state.prevState.isCardView; let index = show.indexOf('show'); if (index != -1) { show = 'hide'; } else { show = 'show'; } this.setState(prevState => ({ isCardView: show })); event.preventDefault() } }>