Redux表单未获取数据

时间:2019-11-26 16:31:03

标签: reactjs redux

我正在尝试实现redux表单。但是由于某些情况,它不会从键盘上获取任何输入。有人可以调查一下吗?

表单组件:

当我按下任何键时,对应的都不会反映出来。它看起来像一个无响应的文本区域。

Here is the screenshot of my Page

import React from 'react';
import { Field, reduxForm } from 'redux-form';


let InputForm = props => {
  const { handleSubmit } = props
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="InputData">Input Data</label>
        <Field name="InputData" component='input' type="text" />
      </div>
      <button type="submit">Submit</button>
    </form>
  )
}

InputForm = reduxForm({
  form: 'contact'
})(InputForm)

export default InputForm

主要组件:

import React from 'react';
import {connect} from 'react-redux';
import fetchTasks from '../actions/getTasks';
import InputForm from './inputfrom';
import showResults from './showResult';

class Homepage extends React.Component{
    componentDidMount(){
        this.props.fetchtsk();
    }
    render(){
        return(
            <div>
                <h1>Welcome to My Task-Manager Page</h1>
                <InputForm onSubmit={showResults} />
                <h3>Here are the tasks:</h3>
                <h4>Unchecked:</h4>
                {this.props.root.map((item,index)=>{
                    if(item.isChecked===0)
                        return (<div><span key={index}>{item.data}</span><input type='checkbox' onClick={()=>this.props.changeCheck(item.insertionId)}></input></div>)
                    return null;
                })}
                <h4>Checked:</h4>
                {this.props.root.map((item,index)=>{
                    if(item.isChecked===1)
                        return (<div><span key={index}>{item.data}</span><input type='checkbox' checked="checked" onClick={()=>this.props.changeCheckR(item.insertionId)}></input></div>)
                    return null;
                })}
            </div>
        )
    }
}
const matchStatetoProps = (state) =>{
    return {root:state.root};
}

const dispatchStatetoProps = (dispatch) =>{
    return{
        fetchtsk:()=> dispatch(fetchTasks),
        changeCheck: (insertionId)=> dispatch({type:'CHANGECHK',payload:insertionId}),
        changeCheckR: (insertionId)=> dispatch({type:'CHANGECHKR',payload:insertionId})
    }
}

export default connect(matchStatetoProps,dispatchStatetoProps)(Homepage);

如果可能的话,有人可以调查一下并告诉我我的错误吗?

这是showResult函数:

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

export default (async function showResults(values) {
  await sleep(500); // simulate server latency
  window.alert(`You submitted:\n\n${JSON.stringify(values, null, 2)}`);
});

0 个答案:

没有答案