小编Gre*_*ego的帖子

我创建了表单,我有几个TextField,包含DropDownMenu材料-ui组件,问题是如何从一个obj中收集所有TextFields,DropDownMenus中的所有数据并将其发送到服务器上.对于TextField,它具有TextField.getValue()返回输入的值.但我不明白如何使用它.

var React = require('react'),
    mui = require('material-ui'),
    Paper = mui.Paper,
    Toolbar = mui.Toolbar,
    ToolbarGroup = mui.ToolbarGroup,
    DropDownMenu = mui.DropDownMenu,
    TextField = mui.TextField,
    FlatButton = mui.FlatButton,
    Snackbar = mui.Snackbar;

var menuItemsIwant = [
  { payload: '1', text: '[Select a finacial purpose]' },
  { payload: '2', text: 'Every Night' },
  { payload: '3', text: 'Weeknights' },
  { payload: '4', text: 'Weekends' },
  { payload: '5', text: 'Weekly' }
];
var menuItemsIcan = [
  { payload: '1', text: '[Select an objective]' }, …

刚认真对待React.我想这是一个基本问题,但我无法理解为什么reducer不会被解雇或更新状态:

我的HomeView.js:

     ....
          const { localeChange, counter, locale } = this.props
            return (
               <div>
                  <button onClick={() => increment(7)}>Increment</button>
              <input type='text' value = {counter}/>
               .....
            </div>
        )

    const mapStateToProps = (state) => ({
      locale: state.locale,
      counter: state.counter
    })
    export default connect(mapStateToProps, {localeChange, increment})(HomeView)

我的reducer(同一文件中的常量,动作和减速器):

export const COUNTER_INCREMENT = 'COUNTER_INCREMENT'

export function increment (text) {
  return { type: COUNTER_INCREMENT, text }
}

export default function counterIncrement (state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + action.text
    default:
      return …

教程:

但是因为我使用redux和反应路由器,所以我不能真正把MuiThemeProvider放到链的顶端.包含此库的最佳方法是什么？

那是我的ReactDOM.render函数:

ReactDOM.render(
  <Provider store={store}>
    <div>
      {devTools}
      <Router history={history} routes={getRoutes(actions.logout)}/>
    </div>
  </Provider>,
  document.getElementById('root')
);

那就是路由器:

export default (onLogout) => (
  <Route path="/" name="app" component={App}>
    <IndexRoute component={SimpleListComponent}/>
    <Route path="register" component={RegisterPage}/>
    <Route path="private" component={privateRoute(PrivatePage)}/>
    <Route path="login" component={LoginPage}/>
    <Route path="logout" onEnter={onLogout}/>
  </Route>
);

我正在尝试将 csrf 标签添加到表单中，但它的工作方式似乎与 mvc 中的不同。

所以我所做的是添加 <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />

登录表单，但是即使存在这些注释，_csrf 属性也不存在

@EnableWebFluxSecurity
@EnableReactiveMethodSecurity

这是我的 SecurityWebFilterChain：

 http
                .authorizeExchange().pathMatchers(
                "/landing",
                "/",
                "/register",
                "/login",
                "/favicon.ico",
                "/js/**",
                "/fonts/**",
                "/assets/**",
                "/css/**",
                "/webjars/**").permitAll()
                .anyExchange().authenticated()
                .and()
                .httpBasic()
                .and()
                .formLogin().loginPage("/login")
                .and().logout()

我缺少什么？

更新：添加了我正在使用的相关依赖项。

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.0.3.RELEASE</version>
    <relativePath/> <!-- lookup parent from repository -->
</parent>
<properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    <java.version>1.8</java.version>
    <thymeleaf.version>3.0.9.RELEASE</thymeleaf.version>
    <thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-dialect.version>

</properties>
<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-webflux</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-redis</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.integration</groupId>
            <artifactId>spring-integration-redis</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.session</groupId>
            <artifactId>spring-session-data-redis</artifactId>
        </dependency>
        <dependency>
            <groupId>net.sourceforge.nekohtml</groupId>
            <artifactId>nekohtml</artifactId> …

禁用 csrf 后，我可以上传文件，但需要启用它。该问题仅在表单 enctype 为 multipart/form-data 时出现，即 403 的“无效 CSRF 令牌”。

通常，即使对于没有文件上传的表单，当我将 enctype 设置为 multipart/form-data 时，也会出现相同的错误。

使用此依赖项：

<dependency>
  <groupId>org.synchronoss.cloud</groupId>
  <artifactId>nio-multipart-parser</artifactId>
  <version>...</version>
</dependency>

尝试在表单中包含隐藏的 csrf 输入，并尝试将其附加到 url 但同样的错误

    <form  method="post" th:action="${'/add/' + id + '/documents?' + _csrf.headerName + '=' + _csrf.token}"  enctype="multipart/form-data">
        <input type="file" name="documents" multiple="multiple">
        <input  type="hidden"
                th:name="${_csrf.headerName}"
                th:value="${_csrf.token}" />
        <input type="hidden" name="_csrf" th:value="${_csrf.token}">
        <button class="btn btn-success btn-l">Upload</button>
    </form>

有这样的控制器建议用于 csrf 注入

@ControllerAdvice
public class SecurityAdvice {@ModelAttribute("_csrf")Mono<CsrfToken> csrfToken(final ServerWebExchange exchange) {
    final Mono<CsrfToken> csrfToken = exchange.getAttributeOrDefault(org.springframework.security.web.server.csrf.CsrfToken.class.getName(), Mono.empty());
    return csrfToken;
} …