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

您需要将readOnly设置为true或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

在此答案中，仅当您单击按钮时输入值才可编辑，否则输入值不可编辑。这是实现这一目标的最简单方法之一......

＆＃13;

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')
	);

＆＃13;

React.js，onclick处理程序不改变组件的状态

3 个答案: