79
rated 0 times
[
83]
[
4]
/ answers: 1 / hits: 13246
/ 5 Years ago, fri, august 30, 2019, 12:00:00
My goal is to call the setEditing () function in the Todo component. I have created a keyboard shortcut:
const keyMap = {
TEST: t
};
const handlers = {
TEST: () => this.setEditing()
};
const MyHotKeysComponent = withHotKeys (Todo, {keyMap, handlers});
<MyHotKeysComponent>
<p> press t </p>
</ MyHotKeysComponent>
In which part of the Todo component do you place these elements?
Code here: https://stackblitz.com/edit/react-cjkf1d?file=index.js
import { withHotKeys } from react-hotkeys;
class EditForm extends React.Component {
render() {
return (
<div>
<textarea onChange={(e) => this.props.handleDescription(e)} value={this.props.description}></textarea>
<button onClick={this.props.onSave} type=submit>Save</button>
<button onClick={this.props.onCancel} type=submit>Cancel</button>
</div>
)
}
}
class Todo extends Component {
constructor(props) {
super(props);
this.state = {
isEditing: false
}
}
setEditing = () => {
this.setState({
isEditing: !this.state.isEditing
})
}
render() {
const { hotKeys, ...remainingProps } = this.props;
return (
<div {...{ ...hotKeys, ...remainingProps }}>
{this.state.isEditing
? (<EditForm
handleChange={this.handleChange}
/>)
: (
<li>
<div>
{this.props.todo.date}
</div>
<div>
{this.props.todo.description}
</div>
<button onClick={() => this.setEditing()}>Edit</button>
</li>
)
}
</div>
)
}
}
const keyMap = {
TEST: t
};
const handlers = {
TEST: () => this.setEditing()
};
const MyHotKeysComponent = withHotKeys(Todo, { keyMap, handlers });
<MyHotKeysComponent>
<p>press t</p>
</MyHotKeysComponent>
class App extends React.Component {
constructor() {
super();
this.state = {
todos: [
{
date: '2019-12-09',
description: 'Hello'
}
],
};
}
render() {
return (
<div>
<ul>
{
this.state.todos
.map((todo, index) =>
<Todo
key={index}
index={index}
todo={todo}
/>
)
}
</ul>
</div>
);
}
}
More From » reactjs
