Is there a way to dispatch an action directly from an input tag?
<input
className="text"
required
onChange={this.props.updateInput.bind(this,"title",e.target.value)}
value={this.props.title}
/>
I'm having an issue where e.target.value is no recognized.
You can do it by creating a new inlined arrow function that passes along the value from the event.
<input
className="text"
required
onChange={e => this.props.updateInput("title", e.target.value)}
value={this.props.title}
/>
If you use @Tholle's advise then you should use updateInput function like that:
updateInput(title, value) {
console.log( title, value );
}
I don't know why you need "title" string as a variable there, but if your intent is changing a title state where resides in a parent from your child component here is an example:
class App extends React.Component {
state = {
title: "",
}
updateInput = title => {
this.setState( { title });
}
render() {
return (
<div>
<Input title={this.state.title} onChange={this.updateInput} />
<br />
Title is: {this.state.title}
</div>
);
}
}
const Input = (props) => {
const handleInput = e =>
props.onChange(e.target.value)
return (
<input
className="text"
required
onChange={handleInput}
value={props.title}
/>
);
}
ReactDOM.render(
<App />,
document.getElementById("root")
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>