javascript - React Material-ui Datepicker/Timepicker OnChange事件回调函数封装

Question

我是 React 的新手，我正在使用 Material-ui作为额外的 UI 依赖项。我的代码中有一些重复，删除起来有点棘手，因为我认为我受到 Material-ui 组件的实现的限制。

这是我的类(class)，我需要帮助重新组织

...other imports...
import EntryForm from './entryform';
export default class TimeSheet extends Component {

constructor(props) {
    ...
    this.state = {
        entry: {
            date: null,
            startTime: null,
            endTime: null,
        },
        list: []
    };

    // ... Class method bindings here ...
}


// ------- METHODS I WOULD LIKE TO CONSOLIDATE -----
dateChanged(event, date) {
    this.setState(prevState => ({
        ...prevState,
        entry: { ...prevState.entry, date: new Date(date) }
    }));
}

startChanged(event, date) {
    this.setState(prevState => ({
        ...prevState,
        entry: { ...prevState.entry, startTime: new Date(date) }
    }));
}

endChanged(event, date) {
    this.setState(prevState => ({
        ...prevState,
        entry: { ...prevState.entry, endTime: new Date(date) }
    }));
}
// ------- METHODS I WOULD LIKE TO CONSOLIDATE -----

saveTimeSheetEntry(event) {
    this.setState((prevState) => ({
        ...prevState,
        list: prevState.list.concat([{
            ...prevState.entry
        }])
    }));
}

render() {
    return (
       ...some stuff

            <EntryForm
                dateChanged={this.dateChanged}
                startChanged={this.startChanged}
                endChanged={this.endChanged}
                date={this.state.entry.date}
                startTime={this.state.entry.startTime}
                endTime={this.state.entry.endTime}
                save={this.saveEntry}
            />

        ...other stuff
    )
}
}

编辑

./EntryForm 组件

const EntryForm = (props) => (
    <Paper style={paperStyle} zDepth={1}>
        <DatePicker onChange={props.dateChanged} value={props.date} hintText="Timesheet Date" />
        <TimePicker onChange={props.startChanged} value={props.startTime} hintText="Start Time" />
        <TimePicker onChange={props.endChanged} value={props.endTime} hintText="End Time" />
        <FlatButton onClick={props.save} label="Save" backgroundColor="#18cbce" fullWidth={true} />
    </Paper>
);

如您所见，我想尝试将 3 种方法合并为一种方法。 dateChanged startChanged 和 endChanged 所有这些方法都被插入到 material-ui 的 Datepicker/Timepicker onChange Prop 。通常我会做这样的事情

handleChange(event, date, stateItem) {
    this.setState(state => ({
        ...state,
        entry: { ...state.entry, [stateItem]: date }
    }));
}

但是当我尝试时它会抛出一个错误，可能是因为 日期/时间选择器实现如下所示。

<Timepicker onChange={props.startChange} ...otherProps />

see the source code for this here查看第 149 行。

没关系，因为该应用程序很小，而且它只是一个基本的时间表条目。但如果我必须对许多状态对象执行此操作，它将变得非常不守规矩。

是否有任何解决方案可以防止我为此类类似操作设置 3 个不同的接触点？

附注对不起...传播滥用:)

Answer 1

合并状态更新

When you call setState(), React merges the object you provide into the current state.

您不需要更新完整状态，React 将独立更新给定对象，其余部分将保持不变。

参见:States updates are merged

主处理程序

there are 3 methods that I would like to try to consolidate into a single method

你只需要category和date(不需要event):

     handleChange(category, date) {
        this.setState(prevState => {

            // Get previous state
            const { entry } = prevState;

            // Set state: date | startTime | endTime
            entry[category] = date; 

            //Update state
            return { entry };
        });
     }

绑定(bind)处理器

要在内部组件中使用 this 和 setState:

<EntryForm onChange={ this.handleChange.bind(this) } {...} />

使用处理程序

只需使用 this.props.onChange 而不是 startChanged、endChanged、dateChanged:

//dateChanged
this.props.onChange('date', date);

//startChanged
this.props.onChange('startTime', date);

//endChanged
this.props.onChange('endTime', date);

时间选择器

But when I try it throws an error, probably because the Date/Time picker implementation looks like this.

onChange 回调只传递一个参数value(即日期)

function onChange(value) {
  console.log(value && value.format(format));
}

因为你只需要date，你可以用匿名函数覆盖实现
(只需将它包装在另一个函数中):

<Timepicker onChange={ date => { props.onChange('date', date ) } />