Reactで必要項目が入力されないと押せないinputタグを作りたい

Question

##環境
React ver.16 以下のCDNを使用しています

<script crossorigin src='https://unpkg.com/react@16/umd/react.development.js'></script>
<script crossorigin src='https://unpkg.com/react-dom@16/umd/react-dom.development.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>

##問題のコード/エラー

class Contact extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        	name: '',
        	name_empty: false,
        	email: '',
        	email_empty: false,
        	disabled: true
        };
    }

    handleNameChange(event){
    	const user_name = event.target.value;
    	const nameEmpty = user_name === '';
    	this.setState({
    		name: user_name,
    		name_empty: nameEmpty
    	});
    }

    handleEmailChange(event){
    	const user_email = event.target.value;
    	const isEmpty = user_email === '';
    	this.setState({
    		email: user_email,
    		email_empty: isEmpty
    	});
    }

    checkForm(){
     if(this.state.name_empty || this.state.isEmpty){
    		this.setState({
    			disabled: true
    		});
    	}else{
	    	this.setState({
	    		disabled: false
	    	});
	    }
    }

    render(){
        let contactForm;
    	contactForm = (
			<div className="contact-item">

            /*情報入力の部分は省略します*/

                <div className="submit-btn">
				    <input disabled={()=>{this.checkForm()}} type="submit" value="送信する" />
				</div>
			</div>
    	);
       return (
            <form action="" method="post">
				{contactForm}
			</form>
        );
    }

inputタグのdisabledのcheckForm()が動作しません。

Warning: Invalid value for prop `disabled` on <input> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM

まだロジック的に足さないといけない部分はありますが、なんとかこのdisabledをとりあえず機能させたいです。
何が間違っているのか検討もつかなく止まってしまいました。
ご協力いただければと思います。

Answer 1

inputのdisabledはあくまで今の状態を設定するためのものなので、関数をセットしても不適切な値となるだけで、関数の実行はされません。

disabled={this.state.disabled}として、別なルートでcheckFormを駆動する、あるいはcheckFormも独立した関数にするのではなくrenderで条件チェックする、という形にするのがいいかと思います。

Comments

[taro_gun]

ありがとうございます。無事解決できました。