Reactjs 如何在rest上的admin中构建facebook登录？ const responseFacebook=（response）=>{ 控制台日志（响应）； 常数有效载荷={ id:response.id， name:response.name， 电子邮件：response.email， 令牌：response.accessToken } 返回有效载荷 } 类FacebookLogin扩展组件{ 有限公司 登录=（身份验证）=>{ console.log（“*************输入**********************”） this.props.userLogin（auth，this.props.location.state？this.props.location.state.nextPathname:“/”） }; render（）{ const{handleSubmit，submiting，theme}=this.props； const muiTheme=getMuiTheme（主题）； const{primary1Color，accent1Color}=getColorsFromTheme（muiTheme）； 返回(

这个登录组件从facebook获取响应，我需要将其发送到facebookLogin类中定义的登录函数

请告诉我如何使用react组件在rest管理员中创建自定义facebook登录页面

非常感谢你的帮助

提前感谢！：）

类EmailLogin扩展组件{
//函数，该函数从
responseFacebook=（响应）=>{
常数有效载荷={
id:response.id，
name:response.name，
电子邮件：response.email，
令牌：response.accessToken
}
this.props.userLogin（有效负载，this.props.location.state？this.props.location.state.nextPathname:“/”）
};
render（）{
const{handleSubmit，submiting，theme}=this.props；
console.log（“#####1:”，handleSubmit）
console.log（“#####2:，提交）；
const muiTheme=getMuiTheme（主题）；
const{primary1Color，accent1Color}=getColorsFromTheme（muiTheme）；
返回(
);
}
}
EmailLogin.propTypes={
…道具类型，
authClient:PropTypes.func，
previousRoute:PropTypes.string，
主题：PropTypes.object，
用户登录名：PropTypes.func.isRequired，
};
EmailLogin.defaultProps={
主题：默认主题，
};
常数增强=合成(
红肿({
表格：'签名'，
验证：（值、道具）=>{
常量错误={}；
返回错误；
},
}),
连接（空，{userLogin:userLoginAction}），
);
导出默认增强（EmailLogin）；

------更新--------

FacebookReact组件有一个回调参数，它调用函数名responseFacebbok

---

该函数应在表单提交时触发。这将有助于将响应重定向到最终调用后端API的authClient。

您好。您可能应该将组件重命名为更合适的名称。

     const responseFacebook = (response) => {
      console.log(response);
      const payload = {
        id: response.id,
        name: response.name,
        email: response.email,
        token: response.accessToken
      }
      return payload
    }

    class FacebookLogin extends Component {
        co
        login = (auth) => {
          console.log("************Entering***************** ")
          this.props.userLogin(auth, this.props.location.state ? this.props.location.state.nextPathname : '/')
        };

        render() {
            const { handleSubmit, submitting, theme } = this.props;
            const muiTheme = getMuiTheme(theme);
            const { primary1Color, accent1Color } = getColorsFromTheme(muiTheme);
            return (
                <MuiThemeProvider muiTheme={muiTheme}>
                    <div style={{ ...styles.main, backgroundColor: primary1Color }}>
                        <Card style={styles.card}>
                            <div style={styles.avatar}>
                                <Avatar backgroundColor={accent1Color} icon={<LockIcon />} size={60} />
                            </div>
                            <form onSubmit={handleSubmit(this.login)}>
                                <CardActions>
                                <FacebookLogin
                                    appId="1023727501002149"
                                    autoLoad={true}
                                    fields="name,email,picture"
                                    callback={responseFacebook}
                                    cssClass="my-facebook-button-class"
                                    icon="fa-facebook"
                                    />
                                </CardActions>
                            </form>
                        </Card>
                        <Notification />
                    </div>
                </MuiThemeProvider>
            );
        }
    }

    FacebookLogin.propTypes = {
        ...propTypes,
        authClient: PropTypes.func,
        previousRoute: PropTypes.string,
        theme: PropTypes.object,
        userLogin: PropTypes.func.isRequired,
    };

    FacebookLogin.defaultProps = {
        theme: defaultTheme,
    };

    const enhance = compose(
        reduxForm({
            form: 'signIn',
            validate: (values, props) => {
                const errors = {};
                return errors;
            },
        }),
        connect(null, { userLogin: userLoginAction }),
    );

    export default enhance( FacebookLogin );

    class EmailLogin extends Component {
        //function which gets the reponse from the
        responseFacebook = (response) => {
          const payload = {
            id: response.id,
            name: response.name,
            email: response.email,
            token: response.accessToken
          }
          this.props.userLogin(payload, this.props.location.state ? this.props.location.state.nextPathname : '/')
        };

        render() {
            const { handleSubmit, submitting, theme } = this.props;
            console.log("#### 1:", handleSubmit)
            console.log("#### 2:", submitting);
            const muiTheme = getMuiTheme(theme);
            const { primary1Color, accent1Color } = getColorsFromTheme(muiTheme);
            return (
                <MuiThemeProvider muiTheme={muiTheme}>
                    <div style={{ ...styles.main, backgroundColor: primary1Color }}>
                        <Card style={styles.card}>
                            <div style={styles.avatar}>
                                <Avatar backgroundColor={accent1Color} icon={<LockIcon />} size={60} />
                            </div>
                            <form onSubmit={handleSubmit(this.responseFacebook)}>
                                <CardActions>
                                <FacebookLogin
                                    type="submit"
                                    appId="1023727501002149"
                                    autoLoad={true}
                                    fields="name,email,picture"
                                    callback={this.responseFacebook}
                                    icon={<CircularProgress size={25} thickness={2} />}
                                    />
                                </CardActions>
                            </form>
                        </Card>
                        <Notification />
                    </div>
                </MuiThemeProvider>
            );
        }
    }

    EmailLogin.propTypes = {
        ...propTypes,
        authClient: PropTypes.func,
        previousRoute: PropTypes.string,
        theme: PropTypes.object,
        userLogin: PropTypes.func.isRequired,
    };

    EmailLogin.defaultProps = {
        theme: defaultTheme,
    };

    const enhance = compose(
        reduxForm({
            form: 'signIn',
            validate: (values, props) => {
                const errors = {};
                return errors;
            },
        }),
        connect(null, { userLogin: userLoginAction }),
    );

    export default enhance( EmailLogin );