表单输入值属性不符合预期

Question

我正在尝试创建一个表单来收集输入以创建事件列表。我在React文档中记录的方式使用'value'属性：

https://reactjs.org/docs/forms.html

，收集用户输入onChange，但材料-ui：

https://material-ui.com/api/input/

使用'value'将值设置到输入字段而不收集字段中的值。这引起了各种各样的错误，例如。无法输入输入，选择器不显示默认值，不接受值，也无法收集信息。我可以使用指针来解决我的错误。谢谢你看看:-)

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Input from '@material-ui/core/Input';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';

const styles = theme => ({
    container: {
        display: 'flex',
        flexWrap: 'wrap',
    }
});

class CreateEvent extends React.Component{

    constructor() {
        super();
        this.state = {
            title: "",
            description: "",
            location: "",
            start_time: "",
            start_date: "",
            end_time: "",
            end_date: ""
        };
    }

    updateInput = e => {
        this.setState({
            [e.target.name]: e.target.value
        });
    };

    cancelCreation = e =>{

    };

    addNewEvent = e =>{
        //Make db call
    };

    render(){
        return(
            <div className="form-container">
                <Paper className="new-event-form">
                    <form className="event-form" onSubmit={this.addNewEvent}>
                        <Input
                            type="text"
                            placeholder="Event title"
                            className="event-title"
                            inputProps={{
                                'aria-label': 'Description',
                            }}
                            multiline={1}
                            rows={1}
                            onChange={this.updateInput}
                            value={this.state.value}

                        />
                        <Input
                            type="text"
                            placeholder="Event description"
                            className="event-title"
                            inputProps={{
                                'aria-label': 'Description',
                            }}
                            multiline={true}
                            rows={10}
                            onChange={this.updateInput}
                            //value={this.state.description}

/*
Will allow user to provide input because 'value' is commented out. But the above component will not because value is referenced
*/
                        />
                        <Grid container spacing={16} className="event-grid">
                            <Grid  item xs={4}>
                                <Input
                                    type="text"
                                    item xs={4}
                                    placeholder="Event location"
                                    className="event-location"
                                    inputProps={{
                                        'aria-label': 'Description',
                                    }}
                                    multiline={true}
                                    rows={4}
                                    onChange={this.updateInput}
                                    //value={this.state.location}
                                />
                            </Grid>
                            <Grid item xs={4}>
                                <TextField
                                    id="date"
                                    label="Start date"
                                    type="date"
                                    defaultValue="2017-05-24"
                                    className="event-start-date"
                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    onChange={this.updateInput}
                                    value={this.state.start_date}
                                />
                                <TextField
                                    id="time"
                                    label="Start time"
                                    type="time"
                                    defaultValue="07:30"
                                    className="event-start-time"
                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    inputProps={{
                                        step: 300, // 5 min
                                    }}
                                />
                            </Grid>
                            <Grid item xs={4}>
                                <TextField
                                    id="date"
                                    label="End date"
                                    type="date"
                                    defaultValue="2017-05-24"
                                    className="event-start-date"
                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                />
                                <TextField
                                    id="time"
                                    label="End time"
                                    type="time"
                                    defaultValue="07:30"
                                    className="event-start-time"
                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    inputProps={{
                                        step: 300, // 5 min
                                    }}
                                />
                            </Grid>
                        </Grid>
                        <Button className="line-spacer"/>
                        <Grid container className="form-buttons">
                            <Grid item xs={12}>
                                <Input type="file" name="my-event-image" id="file" className="new-event-image"> </Input>
                                <label htmlFor="file">CHOOSE AN IMAGE</label>
                                <Button className="line-spacer"  onChange={this.updateInput}/>

                            </Grid>
                        </Grid>
                        <Grid container spacing={16} className="form-buttons">
                            <Grid  item xs={6}>
                                <Button onChange={this.cancelCreation}>Cancel</Button>
                            </Grid>
                            <Grid item xs={6}>
                                <Button type="submit">Submit</Button>
                            </Grid>
                        </Grid>
                    </form>
                </Paper>
            </div>
        );
    }
}

export default withStyles(styles)(CreateEvent);

Answer 1

在你的updateInput方法中，你使用e.target.name，但你的输入字段都没有name属性。在每个name组件上添加一个Input属性，该组件与您在值中使用的名称相匹配。例如：

<Input name="description" ... value={this.state.description} .../>