Solución:
Utilizando refs no es la mejor práctica porque lee el DOM directamente, es mejor usar React’s state en lugar de. Además, su botón no cambia porque el componente no se vuelve a renderizar y permanece en su estado inicial.
Puedes usar setState junto con un onChange detector de eventos para volver a representar el componente cada vez que cambia el campo de entrada:
// Input field listens to change, updates React's state and re-renders the component.
<input onChange={e => this.setState({ value: e.target.value })} value={this.state.value} />
// Button is disabled when input state is empty.
<button disabled={!this.state.value} />
Aquí hay un ejemplo de trabajo:
class AddItem extends React.Component {
constructor() {
super();
this.state = { value: '' };
this.onChange = this.onChange.bind(this);
this.add = this.add.bind(this);
}
add() {
this.props.onButtonClick(this.state.value);
this.setState({ value: '' });
}
onChange(e) {
this.setState({ value: e.target.value });
}
render() {
return (
<div className="add-item">
<input
type="text"
className="add-item__input"
value={this.state.value}
onChange={this.onChange}
placeholder={this.props.placeholder}
/>
<button
disabled={!this.state.value}
className="add-item__button"
onClick={this.add}
>
Add
</button>
</div>
);
}
}
ReactDOM.render(
<AddItem placeholder="Value" onButtonClick={v => console.log(v)} />,
document.getElementById('View')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='View'></div>En HTML,
<button disabled/>
<buttton disabled="true">
<buttton disabled="false">
<buttton disabled="21">
Todos ellos se reducen a disabled = “true” porque devuelve true para una cadena no vacía. Por lo tanto, para devolver falso, pase una cadena vacía en una declaración condicional como this.input.value? “true”: “”.
render() {
return (
<div className="add-item">
<input type="text" className="add-item__input" ref={(input) => this.input = input} placeholder={this.props.placeholder} />
<button disabled={this.input.value?"true":""} className="add-item__button" onClick={this.add.bind(this)}>Add</button>
</div>
);
}
No debería establecer el valor de la entrada a través de refs.
Eche un vistazo a la documentación de los componentes de formularios controlados aquí: https://facebook.github.io/react/docs/forms.html#controlled-components
En una palabra
<input value={this.state.value} onChange={(e) => this.setState({value: e.target.value})} />
Entonces podrá controlar el estado deshabilitado usando disabled={!this.state.value}