React.js, onclick обработчик не меняет состояние компонента

Question

Я разрабатываю приложение, используя node.js и react.js. Я пытаюсь изменить состояние компонента с помощью onclickhandler. Состояние компонента не изменяется после его отображения в браузере. Однако, если я попытаюсь сделать предупреждение в onclickhandler своей работе. Какая может быть проблема? Вот компонент, который я пытаюсь сделать:

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

Вы должны установить истинный или доступен только для чтения fasle.

onButtonClick: function() { 
     this.setState({readOnly: true or false}); 

    } 

Должно работать.

Answer 2

Вот способ, которым Вы можете добавить или удалить атрибут элемента

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

В этом входной ответ значение редактируется только если и нажмите на кнопку в противном случае значение входного сигнала не редактируется. Это одна из наиболее простой способ достижения этой цели ...

import React from 'react'; 
 
import ReactDOM from 'react-dom'; 
 

 
class Sample extends React.Component{ 
 
\t constructor(props){ 
 
\t \t super(props); 
 
\t \t this.state={ 
 
\t \t \t inputValue:"praveen" 
 
\t \t } 
 

 
\t \t this.valueChange = this.valueChange.bind(this); 
 
\t } 
 

 
\t valueChange(e){ 
 
\t \t this.setState({inputValue: e.target.value}) 
 
\t } 
 
\t render(){ 
 
\t \t return(
 
\t \t \t <div> 
 
\t \t \t \t <input type="text" value={this.state.inputValue } /> 
 
\t \t \t \t <button type="button" onClick={this.valueChange}>Edit</button> 
 
\t \t \t </div> 
 

 
\t \t) 
 
\t } 
 
} 
 

 
export default Sample; 
 

 
ReactDOM.render(
 
\t 
 
\t <Sample />, 
 
\t 
 
\t document.getElementById('root') 
 
\t);