- Ethereal
- Mar 8, 2003
-
|
I highly recommend RethinkDB over MongoDB. They take data loss really seriously.
|
#
¿
Oct 10, 2013 06:09
|
|
- Adbot
-
ADBOT LOVES YOU
|
|
|
#
¿
May 7, 2024 20:45
|
|
- Ethereal
- Mar 8, 2003
-
|
For those React people, is there a cleaner way of accomplishing the following? If calling an event handler with a parameter, you need to wrap it in an anonymous function and it looks horrid in more complex examples:
code:
var self = this;
var index = 1;
return (<input type="text" onChange={function() { self.handleBlockNameChange(index); }} />)
opposed to a parameterless call:
code:
return (<input type="text" onChange={self.handleBlockNameChange} />)
Two ways, use partial application through the Function.bind syntax or you can pass the parameter and function as props and have a handler that calls your passed in handler with the index.
|
|
#
¿
Oct 31, 2015 22:48
|
|
- Ethereal
- Mar 8, 2003
-
|
I'm finally getting to play with react and redux. I'm seeing a lot of the following (in the Todo List Example for instance):
code:const TodoList = ({ todos, onTodoClick }) => (
<ul>
{todos.map(todo =>
<Todo
key={todo.id}
{...todo}
onClick={() => onTodoClick(todo.id)}
/>
)}
</ul>
)
Should doing something like documented on DOM Event Listeners be better? This has an example of binding an event to the window, but that seems bad too. Does the onClick binding on a component transpile into something else?
Can I bind to the Component or element inside componentDidMount instead of window?
code: componentDidMount: function() {
window.addEventListener('click', this.handleClick);
},
handleClick: function(e) {
e.preventDefault();
// Do stuff
}
You don't want to have inline click handlers ever on your components. What happens is that on each re-render you will generate a new function which causes downstream children to re-render. It's also a bit thrashy generating new functions like this all the time.
In an ideal world you would split off the individual child component and have a handler that you can call directly.
code:class TodoItem extends React.Component {
onClickHandler = (e) => {
e.preventDefault();
this.props.onTodoClick(this.props.todoId);
}
render() {
<Todo onClick={this.onClickHandler}.../>
}
}
const TodoList = ({ todos, onTodoClick }) => (
<ul>
{todos.map(todo =>
<TodoItem
key={todo.id}
{...todo}
onTodoClick={onTodoClick}
todoId={todo.id}
/>
)}
</ul>
)
|
|
#
¿
Jul 14, 2016 05:02
|
|
#
¿
Oct 10, 2013 06:09
