reactjs - react+redux 与 react-bootstrap > FormControl > 获取价值

Question

我正在使用 react+redux 和 react-bootstrap 组件。我想将 FormControl 文本元素（电子邮件）的值传递给调度的 redux 操作，但我不知道该怎么做。

class LoginForm extends React.Component {
    render() {
        const email = React.findDOMNode(this.refs.email);

        return (
            <div>
                <Form horizontal>
                    <FormGroup controlId="formHorizontalEmail">
                        <Col componentClass={ControlLabel}>Email</Col>
                        <Col><FormControl type="email" ref="email"/></Col>
                    </FormGroup>

                    <FormGroup>
                        <Col>
                            <Button type="submit" block>Sign in</Button>
                        </Col>
                    </FormGroup>
                </Form>

                <Button onClick={() => this.props.doLogin(email, 'password')}>Login</Button>
            </div>
        )
    }
}

/**
 * Connect staff.
 */
const mapStateToProps = (state) => {
    return {
        ...
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        doLogin: (email, password) => dispatch(performLogin(email, password))
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(LoginForm)

Answer 1

如何使用 React 读取 FormControl 的文本值的唯一一种方法（根据我的研究）是：

class LoginForm extends React.Component {
    handleOnChange = (event) => {
        this.setState({ [event.target.id]: event.target.value }, null);
    }

    render() {
        return (
            <div>
                <Form horizontal>
                    <FormGroup controlId="email">
                        <Col componentClass={ControlLabel}}>Email</Col>
                        <Col>
                            <FormControl type="email" placeholder="Email" onChange={this.handleOnChange}
                            />
                        </Col>
                    </FormGroup>

                    <FormGroup controlId="password">
                        <Col componentClass={ControlLabel} sm={2}>Password</Col>
                        <Col>
                            <FormControl type="password" placeholder="Password" onChange={this.handleOnChange} />
                        </Col>
                    </FormGroup>

                    <FormGroup>
                        <Col>
                            <Button onClick={() => this.props.doLogin(this.state.email, this.state.password)}>Submit</Button>
                        </Col>
                    </FormGroup>
                </Form>
            </div>
        )
    }
}