Question

我有两个组件：FormSection和InputWrapper。如果包装在div中的输入由FormSection方法呈现，则将表单数据发送到服务器绝对没有问题。但是如果我使用InputWrapper组件渲染包装输入，那么服务器获得的唯一东西就是CSRF令牌。

客户端表单验证正常工作（例如，如果输入设置为必需且其值为空，则浏览器显示错误）。有没有办法使用单独的组件进行输入？

FormSection

class FormSection extends React.Component {
   constructor(props, context) {
      super(props, context);

      this.state = {
          inputs: [
              {id: 'id_title', name: 'title' key:'title', label: "Title"},
              {id: 'id_director', name: 'director' key:'director', label: "Director"}
          ]
       }
   }

   get_csrf_token() {
      ...
   }

   render() {
      return (<form action="/createmovie/" method="POST">
                  <input type='hidden' name='csrf' value={this.get_csrf_token()} />
                  {this.state.inputs.map(props => <InputWrapper {...props}) />)}
              </form>)
   }
}

InputWrapper

 class InputWrapper extends React.Component {
     handleFocus(event) {
      ...
     }
     render() {
         return (<div class="wrapped">
                   <label for={this.props.id}>{this.props.label}</label>
                   <input id={this.props.id} name={this.props.name} onFocus={this.handleFocus} />
                 </div>);
     }
 }

React.js - 表单中未检测到组件中的输入

0 个答案: