如何重置状态响应为null

Question

我使用了一个有两个下拉的表单。我有一个提交和取消按钮。我需要在单击取消按钮时重置我的状态，并将下拉值设置为初始值，即选择。两次单击后状态变为空，即使在选择值未重置之后也是如此。有人可以帮忙吗？

class MyForm extends React.Component {
     this.state = {
                result:
                    {
                        first: '',
                        second: '',
                        },
                          this.clearValues=this.clearValues.bind(this);
                          }
    clearValues()
    {
        this.setState({ result:
                    {
                        first: '',
                        last: '',
                        }})
                        }
                         render() {
                         return(<div>
                         <div className=" col col-sm-3">
                                        <label>first
                                            <br /><br />

                                            <select className="custom form-group" name="first" value={this.state.result.first} onChange={this.handleChange}>
                                                <option>select</option>
                                                {data.map((movie) => {
                                                    return <option key={movie.id}> {movie.first} </option>;
                                                })}
                                            </select>

                                        </label>
                                        <script>console.log(value)</script>
                                    </div>
                                     <div className=" col col-sm-3">
                                        <label>second
                                            <br /><br />

                                            <select className="custom form-group" name="second" value={this.state.result.second} onChange={this.handleChange}>
                                                <option>select</option>
                                                {data.map((movie) => {
                                                    return <option key={movie.id}> {movie.second} </option>;
                                                })}
                                            </select>

                                        </label>
                                        <script>console.log(value)</script>
                                    </div>
                                    <div className="form-group col col-sm-3">
                                        <button type="submit" value="submit" className="btn  btn-primary" style={styles}    >Search</button></div>
                                      <div className="form-group col col-sm-3">
                                        <button onClick={this.clearValues} type="button" className="btn  btn-default" style={styles} >Clear</button>
                                    </div>
                         </div>);
                         }