テキストボックスから入力を取得してReactで印刷するにはどうすればよいですか？

debugcn 投稿 Dev

JavaDeveloper

両方のテキストボックスの入力をフェッチする非常に単純なプロジェクトを作成しようとしているReactは初めてです。ボタンをクリックすると、テキストボックスの「データ」が段落に出力されます。

ボタンがクリックされたときに入力テキストボックスのテキストをフェッチするにはどうすればよいですか？

class Input extends Component {
    state = { 
        tagged: false,
        message: '', 
    }

    handleClick(e) {
        this.setState({tagged: true});
        e.preventDefault();
        console.log('The link was clicked.');
    }

    render() {                                                
        return (
            <div id="id" style={divStyle}>
                <p> hello </p>
                <input
                    style = {textStyle}
                    placeholder="[email protected]" 
                    type="text">
                </input>

                <input
                    style = {textStyle}
                    placeholder="tag" 
                    type="text">
                </input>
                <button
                    onClick={(e) => this.handleClick(e)}
                    style={buttonStyle}>
                    {this.state.tagged ? 'Tagged' : 'Tag ' } 
                </button>

                <p>
                    {this.state.tagged ? 'Clicked' : 'Still' }
                </p>
            </div>    
        )
    }
}

マウスジッパー

各入力にonChangeイベントハンドラーを追加できます。

class Input extends Component {
    state = { 
        tagged: false,
        message: '',
        input1: '',
        input2: '',
    }

    handleClick(e) {
        // access input values in the state
        console.log(this.state) // {tagged: true, input1: 'text', input2: 'text2'}
        this.setState({tagged: true});
        e.preventDefault();
        console.log('The link was clicked.');
    }

    handleInputChange = (e, name) => {
      this.setState({
       [name]: e.target.value
     })
    }

    render() {                                                
        return (
            <div id="id" style={divStyle}>
                <p> hello </p>
                <input
                    style = {textStyle}
                    placeholder="[email protected]" 
                    type="text"
                    onChange={(e) => this.handleInputChange(e, 'input1')}
                >
                </input>

                <input
                    style = {textStyle}
                    placeholder="tag" 
                    type="text"
                   onChange={(e) => this.handleInputChange(e, 'input2')}
               >
                </input>
                <button
                    onClick={(e) => this.handleClick(e)}
                    style={buttonStyle}>
                    {this.state.tagged ? 'Tagged' : 'Tag ' } 
                </button>

                <p>
                    {this.state.tagged ? 'Clicked' : 'Still' }
                </p>
            </div>    
        )
    }
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]