如何在按下提交按钮后将Material-Ui redux表格的值打印到Material-Ui表格?

时间:2018-03-30 04:49:44

标签: redux redux-form react-redux-form

我的redux-form中有一个FieldArray输入,想要在表格上打印该表单的值。我是React的新手,但有一些JavaScript经验。我想要在表格上打印表单的值。 .................................................. .................................................. .................................................. .................................................. .................................................. .................................................. .................................................. .................................................. .................................................. .................................................. .................................................. .................................................. ...............................................

APP.JS -

    const renderMembers = ({ fields, meta: { error, submitFailed } }) => (
     <ul> 
        <li> 
        <FloatingActionButton onClick={() => fields.push({})}> 
          <ContentAdd />
        </FloatingActionButton>

          {submitFailed && error && <span>{error}</span>}
       </li>

        {fields.map((member, index) => ( 
      const {
        handleChange, 
        handleSubmit,  
        pristine, 
        values,
        reset, 
        submitting 
         } = props

      return (
        <MuiThemeProvider>
      <form onSubmit={handleSubmit}>

          <FieldArray name="members" component={renderMembers}/>
          <div>
          <RaisedButton disabled={submitting}
          type="submit"
          label="Submit"
          labelPosition="after"
          primary={true}
          icon={<ActionAndroid />}
            />
          />
          </div>
      </form>
      <div>
      <Table>
      <TableHeader>
            <TableRow>
              <TableHeaderColumn>ID</TableHeaderColumn>
              <TableHeaderColumn>First Name</TableHeaderColumn>
              <TableHeaderColumn>Last Name</TableHeaderColumn>
              <TableHeaderColumn>List of Hobbies (1 - 5)</TableHeaderColumn>
            </TableRow>
          </TableHeader>
          <TableBody>
            <TableRow> 
              <TableRowColumn>want to print the value here</TableRowColumn>
              <TableRowColumn>want to print the value here</TableRowColumn>
              <TableRowColumn>want to print the value here</TableRowColumn>
              <TableRowColumn>want to print the value here</TableRowColumn>
            </TableRow>
            </TableBody>
      </Table>
      </div>
      </MuiThemeProvider>
      );
    };   

    class App extends Component {


      render() {
         return (
          <div className="App">

            <SignInForm onSubmit={this.submit}  />

          </div>
        );
      }
    }

0 个答案:

没有答案