SOURCE

// 12. Accessing DOM Elements -- Refs
// a color picker app that refocuses to and clears the input text-field after submitting the result using the 'go' button

class ColorDisplay extends React.Component{
    render(){
        var displayStyle={
            width: 300,
            height: 300,
            backgroundColor:this.props.bgColor,
            WebkitFilter: 'drop-shadow(0px 0px 5px #666)',
            filter: 'drop-shadow(0px 0px 5px #666)'
        }
        return <div style={displayStyle}></div>
    }
}

class ColorPicker extends React.Component{
    constructor(props){
        super(props);
        this.state={
            color:'',
            bgColor:''
        }
        this.setColor=this.setColor.bind(this);
        this.submitColor= this.submitColor.bind(this);
    }
    setColor(e){
        this.setState({color:e.target.value});
    }
    submitColor(e){
        this.setState({
            bgColor: this.state.color,
            color:''
        });
        // to prevent the page from reloading
        e.preventDefault();
        // refocus on the input text-field
        this._input.focus();
    }
    render(){
        var pickerStyle={
            width:300,
            padding:0,
            // also forcing the last line to be justified
            textAlign: 'justify'
        };
        var formStyle={
            form:{
                display: 'flex',
                justifyContent: 'center'

            },
            input:{
                width:230,
                height: 50,
                marginTop: 20,
                marginRight: 'auto',
                fontSize: 18
            },
            button:{
                backgroundColor: '#666',
                color: 'white',
                width:50,
                height: 50,
                marginTop: 20,
                marginLeft: 'auto',
                fontSize: 20,
                fontWeight: 'bold'


            }
        }
        return <div style={pickerStyle}>
            <ColorDisplay bgColor={this.state.bgColor}/>
            <form style={formStyle.form} onSubmit={this.submitColor}>
                {/* has to close the input tag somehow */}
                <input placeholder='Enter a color value' style={formStyle.input} value={this.state.color} onChange={this.setColor} ref={el=>this._input=el}/>
                    <button style={formStyle.button} type='submit'>go</button>
                </form>
        </div>
    }
}

ReactDOM.render(
    <ColorPicker />,
    document.querySelector('#container11')
)

<div id="container11">
    <!-- This element's contents will be replaced with your component. -->
</div>

body{
  background-color: #FCFCFC;
}
.container p {
    font-size: 25px;
}