React.js, onclick handler not changing state of the component - node.js

Question

I am developing an app using node.js and react.js. I am trying to change the state of a component using an onclickhandler. The state of the component is not changing once it is rendered on the browser. However , if I try to do an alert in the onclickhandler its working.What might be the issue?
Here is the component that I'm trying to render :
var Server = module.exports = React.createClass({
getInitialState: function() {
return {
readOnly:"readOnly",
}
},
onButtonClick: function() {
this.setState({readOnly: ""});
},
render: function render() {
return (
<Layout {...this.props}>
<div id='index'>
<h1>Hello {this.props.name}!</h1>
<button onClick={this.onButtonClick}>Click Me</button>
<input readOnly={this.state.readOnly} />
<br/>
<a href='/'>Click to go to an react-router rendered view</a>
</div>
</Layout>
);
}
});

Answer 1

You need to set readOnly true or fasle.
onButtonClick: function() {
this.setState({readOnly: true or false});
}
It should work.

Answer 2

Here is a way you could add or remove an attribute to an element
var Example = React.createClass({
getInitialState: function () {
return {
readOnly: true,
}
},
onButtonClick: function () {
this.setState({readOnly: !this.state.readOnly});
},
render: function render() {
return (
<div {...this.props}>
<div id='index'>
<h1>Hello {this.props.name}!</h1>
<button onClick={this.onButtonClick}>Click Me</button>
<input {...(this.state.readOnly) ? {readOnly: 'readOnly'} : {}} />
<br/>
<a href='/'>Click to go to an react-router rendered view</a>
</div>
</div>
);
}
});

Answer 3

In this answer input value is editable only if u click the button otherwise the value of the input is not editable. This is one of the most simple way to achieve this...
import React from 'react';
import ReactDOM from 'react-dom';
class Sample extends React.Component{
constructor(props){
super(props);
this.state={
inputValue:"praveen"
}
this.valueChange = this.valueChange.bind(this);
}
valueChange(e){
this.setState({inputValue: e.target.value})
}
render(){
return(
<div>
<input type="text" value={this.state.inputValue } />
<button type="button" onClick={this.valueChange}>Edit</button>
</div>
)
}
}
export default Sample;
ReactDOM.render(
<Sample />,
document.getElementById('root')
);