What's the react way of setting focus on a particular text field after the component is rendered?
Documentation seems to suggest using refs, e.g:
Set ref="nameInput" on my input field in the render function, and then call:
this.refs.nameInput.getInputDOMNode().focus();
But where should I call this? I've tried a few places but I cannot get it to work.
#Dhiraj's answer is correct, and for convenience you can use the autoFocus prop to have an input automatically focus when mounted:
<input autoFocus name=...
Note that in jsx it's autoFocus (capital F) unlike plain old html which is case-insensitive.
You should do it in componentDidMount and refs callback instead. Something like this
componentDidMount(){
this.nameInput.focus();
}
class App extends React.Component{
componentDidMount(){
this.nameInput.focus();
}
render() {
return(
<div>
<input
defaultValue="Won't focus"
/>
<input
ref={(input) => { this.nameInput = input; }}
defaultValue="will focus"
/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
<div id="app"></div>
Focus on mount
If you just want to focus an element when it mounts (initially renders) a simple use of the autoFocus attribute will do.
<input type="text" autoFocus />
Dynamic focus
to control focus dynamically use a general function to hide implementation details from your components.
React 16.8 + Functional component - useFocus hook
const FocusDemo = () => {
const [inputRef, setInputFocus] = useFocus()
return (
<>
<button onClick={setInputFocus} >
Focus
</button>
<input ref={inputRef} />
</>
)
}
const useFocus = () => {
const htmlElRef = useRef(null)
const setFocus = () => {htmlElRef.current && htmlElRef.current.focus()}
return [ htmlElRef, setFocus ]
}
Full Demo
React 16.3 + Class Components - utilizeFocus
class App extends Component {
constructor(props){
super(props)
this.inputFocus = utilizeFocus()
}
render(){
return (
<>
<button onClick={this.inputFocus.setFocus}>
Focus
</button>
<input ref={this.inputFocus.ref}/>
</>
)
}
}
const utilizeFocus = () => {
const ref = React.createRef()
const setFocus = () => {ref.current && ref.current.focus()}
return {setFocus, ref}
}
Full Demo
As of React 0.15, the most concise method is:
<input ref={input => input && input.focus()}/>
If you just want to make autofocus in React, it's simple.
<input autoFocus type="text" />
While if you just want to know where to put that code, answer is in componentDidMount().
v014.3
componentDidMount() {
this.refs.linkInput.focus()
}
In most cases, you can attach a ref to the DOM node and avoid using findDOMNode at all.
Read the API documents here: https://facebook.github.io/react/docs/top-level-api.html#reactdom.finddomnode
React 16.3 added a new convenient way to handle this by creating a ref in component's constructor and use it like below:
class MyForm extends Component {
constructor(props) {
super(props);
this.textInput = React.createRef();
}
componentDidMount() {
this.textInput.current.focus();
}
render() {
return(
<div>
<input ref={this.textInput} />
</div>
);
}
}
For more details about React.createRef, you can check this article in React blog.
Update:
Starting from React 16.8, useRef hook can be used in function components to achieve the same result:
import React, { useEffect, useRef } from 'react';
const MyForm = () => {
const textInput = useRef(null);
useEffect(() => {
textInput.current.focus();
}, []);
return (
<div>
<input ref={textInput} />
</div>
);
};
The React docs now have a section for this. https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute
render: function() {
return (
<TextInput
ref={function(input) {
if (input != null) {
input.focus();
}
}} />
);
},
I just ran into this issue and I'm using react 15.0.1 15.0.2 and I'm using ES6 syntax and didn't quite get what I needed from the other answers since v.15 dropped weeks ago and some of the this.refs properties were deprecated and removed.
In general, what I needed was:
Focus the first input (field) element when the component mounts
Focus the first input (field) element with an error (after submit)
I'm using:
React Container/Presentation Component
Redux
React-Router
Focus the First Input Element
I used autoFocus={true} on the first <input /> on the page so that when the component mounts, it will get focus.
Focus the First Input Element with an Error
This took longer and was more convoluted. I'm keeping out code that isn't relevant to the solution for brevity.
Redux Store / State
I need a global state to know if I should set the focus and to disable it when it was set, so I don't keep re-setting focus when the components re-render (I'll be using componentDidUpdate() to check for setting focus.)
This could be designed as you see fit for you application.
{
form: {
resetFocus: false,
}
}
Container Component
The component will need to have the resetfocus property set and a callBack to clear the property if it ends up setting focus on itself.
Also note, I organized my Action Creators into separate files mostly due to my project is fairly large and I wanted to break them up into more manageable chunks.
import { connect } from 'react-redux';
import MyField from '../presentation/MyField';
import ActionCreator from '../actions/action-creators';
function mapStateToProps(state) {
return {
resetFocus: state.form.resetFocus
}
}
function mapDispatchToProps(dispatch) {
return {
clearResetFocus() {
dispatch(ActionCreator.clearResetFocus());
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(MyField);
Presentation Component
import React, { PropTypes } form 'react';
export default class MyField extends React.Component {
// don't forget to .bind(this)
constructor(props) {
super(props);
this._handleRef = this._handleRef.bind(this);
}
// This is not called on the initial render so
// this._input will be set before this get called
componentDidUpdate() {
if(!this.props.resetFocus) {
return false;
}
if(this.shouldfocus()) {
this._input.focus();
this.props.clearResetFocus();
}
}
// When the component mounts, it will save a
// reference to itself as _input, which we'll
// be able to call in subsequent componentDidUpdate()
// calls if we need to set focus.
_handleRef(c) {
this._input = c;
}
// Whatever logic you need to determine if this
// component should get focus
shouldFocus() {
// ...
}
// pass the _handleRef callback so we can access
// a reference of this element in other component methods
render() {
return (
<input ref={this._handleRef} type="text" />
);
}
}
Myfield.propTypes = {
clearResetFocus: PropTypes.func,
resetFocus: PropTypes.bool
}
Overview
The general idea is that each form field that could have an error and be focused needs to check itself and if it needs to set focus on itself.
There's business logic that needs to happen to determine if the given field is the right field to set focus to. This isn't shown because it will depend on the individual application.
When a form is submitted, that event needs to set the global focus flag resetFocus to true. Then as each component updates itself, it will see that it should check to see if it gets the focus and if it does, dispatch the event to reset focus so other elements don't have to keep checking.
edit
As a side note, I had my business logic in a "utilities" file and I just exported the method and called it within each shouldfocus() method.
Cheers!
This is not longer the best answer. As of v0.13, this.refs may not available until AFTER componentDidMount() runs, in some odd cases.
Just add the autoFocus tag to your input field, as FakeRainBrigand showed above.
Ref. #Dave's comment on #Dhiraj's answer; an alternative is to use the callback functionality of the ref attribute on the element being rendered (after a component first renders):
<input ref={ function(component){ React.findDOMNode(component).focus();} } />
More info
Using React Hooks / Functional components with Typescript, you can use the useRef hook with HTMLInputElement as the generic parameter of useRef:
import React, { useEffect, useRef } from 'react';
export default function MyComponent(): JSX.Element {
const inputReference = useRef<HTMLInputElement>(null);
useEffect(() => {
inputReference.current?.focus();
}, []);
return (
<div>
<input ref={inputReference} />
</div>
);
}
Or if using reactstrap, supply inputReference to innerRef instead of ref:
import React, { useEffect, useRef } from 'react';
import { Input } from 'reactstrap';
export default function MyComponent(): JSX.Element {
const inputReference = useRef<HTMLInputElement>(null);
useEffect(() => {
inputReference.current?.focus();
}, []);
return (
<div>
<Input innerRef={inputReference} />
</div>
);
}
Note that none of these answers worked for me with a material-ui TextField component. Per How to set focus to a materialUI TextField? I had to jump through some hoops to get this to work:
const focusUsernameInputField = input => {
if (input) {
setTimeout(() => {input.focus()}, 100);
}
};
return (
<TextField
hintText="Username"
floatingLabelText="Username"
ref={focusUsernameInputField}
/>
);
This is the proper way, how to autofocus. When you use callback instead of string as ref value, it is automatically called. You got your ref available than without the need of touching the DOM using getDOMNode
render: function() {
return <TextInput ref={(c) => this._input = c} />;
},
componentDidMount: function() {
this._input.focus();
},
You don't need getInputDOMNode?? in this case...
Just simply get the ref and focus() it when component gets mounted -- componentDidMount...
import React from 'react';
import { render } from 'react-dom';
class myApp extends React.Component {
componentDidMount() {
this.nameInput.focus();
}
render() {
return(
<div>
<input ref={input => { this.nameInput = input; }} />
</div>
);
}
}
ReactDOM.render(<myApp />, document.getElementById('root'));
You can put that method call inside the render function. Or inside the life cycle method, componentDidUpdate
I have same problem but I have some animation too, so my colleague suggest to use window.requestAnimationFrame
this is ref attribute of my element:
ref={(input) => {input && window.requestAnimationFrame(()=>{input.focus()})}}
AutoFocus worked best for me. I needed to change some text to an input with that text on double click so this is what I ended up with:
<input autoFocus onFocus={this.setCaretToEnd} value={this.state.editTodo.value} onDoubleClick={this.updateTodoItem} />
NOTE: To fix the issue where React places the caret at the beginning of the text use this method:
setCaretToEnd(event) {
var originalText = event.target.value;
event.target.value = '';
event.target.value = originalText;
}
Found here:
https://coderwall.com/p/0iz_zq/how-to-put-focus-at-the-end-of-an-input-with-react-js
<input type="text" autoFocus />
always try the simple and basic solution first, works for me.
To move focus to a newly created element, you can store the element's ID in the state and use it to set autoFocus. e.g.
export default class DefaultRolesPage extends React.Component {
addRole = ev => {
ev.preventDefault();
const roleKey = this.roleKey++;
this::updateState({
focus: {$set: roleKey},
formData: {
roles: {
$push: [{
id: null,
name: '',
permissions: new Set(),
key: roleKey,
}]
}
}
})
}
render() {
const {formData} = this.state;
return (
<GridForm onSubmit={this.submit}>
{formData.roles.map((role, idx) => (
<GridSection key={role.key}>
<GridRow>
<GridCol>
<label>Role</label>
<TextBox value={role.name} onChange={this.roleName(idx)} autoFocus={role.key === this.state.focus}/>
</GridCol>
</GridRow>
</GridSection>
))}
</GridForm>
)
}
}
This way none of the textboxes get focus on page load (like I want), but when you press the "Add" button to create a new record, then that new record gets focus.
Since autoFocus doesn't "run" again unless the component gets remounted, I don't have to bother unsetting this.state.focus (i.e. it won't keep stealing focus back as I update other states).
Simple solution without autofocus:
<input ref={ref => ref && ref.focus()}
onFocus={(e)=>e.currentTarget.setSelectionRange(e.currentTarget.value.length, e.currentTarget.value.length)}
/>
ref triggers focus, and that triggers onFocus to calculate the end and set the cursor accordingly.
Ben Carp solution in typescript
React 16.8 + Functional component - useFocus hook
export const useFocus = (): [React.MutableRefObject<HTMLInputElement>, VoidFunction] => {
const htmlElRef = React.useRef<HTMLInputElement>(null);
const setFocus = React.useCallback(() => {
if (htmlElRef.current) htmlElRef.current.focus();
}, [htmlElRef]);
return React.useMemo(() => [htmlElRef, setFocus], [htmlElRef, setFocus]);
};
Warning: ReactDOMComponent: Do not access .getDOMNode() of a DOM node; instead, use the node directly. This DOM node was rendered by App.
Should be
componentDidMount: function () {
this.refs.nameInput.focus();
}
The simplest answer is add the ref="some name" in the input text element and call the below function.
componentDidMount(){
this.refs.field_name.focus();
}
// here field_name is ref name.
<input type="text" ref="field_name" />
After trying a lot of options above with no success I've found that It was as I was disabling and then enabling the input which caused the focus to be lost.
I had a prop sendingAnswer which would disable the Input while I was polling the backend.
<Input
autoFocus={question}
placeholder={
gettingQuestion ? 'Loading...' : 'Type your answer here...'
}
value={answer}
onChange={event => dispatch(updateAnswer(event.target.value))}
type="text"
autocomplete="off"
name="answer"
// disabled={sendingAnswer} <-- Causing focus to be lost.
/>
Once I removed the disabled prop everything started working again.
Read almost all the answer but didnt see a getRenderedComponent().props.input
Set your text input refs
this.refs.username.getRenderedComponent().props.input.onChange('');
According to the updated syntax, you can use this.myRref.current.focus()
Focus using createRef for functional components
To developers using Functional Components. This seems to suit. Focus happens on inputfield after clicking on the button. I've attached CodeSandbox link too.
import React from 'react';
export default function App() {
const inputRef = React.createRef();
return <>
<input ref={inputRef} type={'text'} />
<button onClick={() => {if (inputRef.current) { inputRef.current.focus() }}} >
Click Here
</button>
</>
}
https://codesandbox.io/s/blazing-http-hfwp9t
That one worked for me:
<input autoFocus={true} />
Updated version you can check here
componentDidMount() {
// Focus to the input as html5 autofocus
this.inputRef.focus();
}
render() {
return <input type="text" ref={(input) => { this.inputRef = input }} />
})
Since there is a lot of reasons for this error I thought that I would also post the problem I was facing. For me, problem was that I rendered my inputs as content of another component.
export default ({ Content }) => {
return (
<div className="container-fluid main_container">
<div className="row">
<div className="col-sm-12 h-100">
<Content /> // I rendered my inputs here
</div>
</div>
</div>
);
}
This is the way I called the above component:
<Component Content={() => {
return (
<input type="text"/>
);
}} />
How do you pass data to a form to edit in ReactJS?
I have 3 components, Table, Form and a parent component.
return (
<Table />
<Form />
);
Table renders a list of items and each row has an Edit button
So, when the Edit button is clicked, it will call an edit function (passed from parent using props) with the id of the item.
this.props.edit('iAmTheIdOfTheItem');
The edit function will set the id in the parent component state.
edit = (id) => {
this.setState({ id })
}
The selected item is passed to the Form component.
<Form item={ items.find(item => item.id === this.state.id) } />
This should store the current passed data in the Form component state. So that I can use that data to make any changes.
When the update button will be clicked, it will pass the state to the parent component.
Possible Solutions
componentDidMount
I can't set the state using componentDidMount since the Form component is already mounted.
id && < Form />
While this can help me use componentDidMount. But the problem is that the Form component is wrapped in a Modal component. So, closing animation will not work when I update the value and clear the id in the state.
getDerivedStateFromProps
I can use this one as a last resort but it looks like a hack to me and I'm not sure if I really need this. Since I've more than 5 forms, adding this every form does not look good to me.
Any better approach? Suggestions?
This should be helpful
https://codesandbox.io/s/82v98o21wj?fontsize=14
You can use Refs for this.
Reference the child using this.child = React.createRef() and pass this to your child component like this ref={this.child}. Now you can use that child's functions like this this.child.current.yourChildsFunction("object or data you want to pass") then on that child function, just set your form state using the data passed.
Here's a complete example. Sandbox HERE
class Parent extends Component {
constructor(props) {
super(props);
this.child = React.createRef();
}
onClick = () => {
this.child.current.fillForm("Jackie Chan");
};
render() {
return (
<div>
<button onClick={this.onClick}>Click</button>
<br />
<br />
<Child ref={this.child} />
</div>
);
}
}
class Child extends Component {
constructor(props) {
super(props);
this.state = {
name: ""
};
}
handleChange = ({ target }) => {
this.setState({ [target.name]: target.value });
};
fillForm(passedvalue) {
this.setState({ name: passedvalue });
}
render() {
return (
<form>
<label for="name">Name</label>
<input
id="name"
name="name"
onChange={this.handleChange.bind(this)}
value={this.state.name}
/>
</form>
);
}
}
Here an updated version of your sandbox: https://codesandbox.io/s/jprz3449p9
The process is quite basic:
You send the edited item to your form (via props)
The form stores a copy in its own state
When you change the form, it changes the local form state
On submit, you send the state to your parent with a callback (onUpdate here)
What you were missing:
Refresh the local form state when props change
if (!item || id !== item.id) {
this.setState(item);
}
Notify the parent when the item is updated with a callback
update = event => {
event.preventDefault();
this.props.onUpdate(this.state);
this.setState(emptyItem);
};
I am working on a Rich Text Editor component using React and Draft.js that will be part of a library that my team uses to build our app's UI. I'm running into problems organizing the component in order to separate state and functionality. I'm not sure if it will matter to my questions, but we use Redux in our app but not in our library.
This is a version of the code that I have simplified to try to focus on the problems that I am having:
class TextInput extends React.Component {
constructor(props) {
super(props);
this.state = {
editorState: this.getInitialEditorState()
};
this.onChange = this.onChange.bind(this);
this.toggleLinkMenu = this.toggleLinkMenu.bind(this);
this.toggleInline = this.toggleInline.bind(this);
this.toggleBlock = this.toggleBlock.bind(this);
}
onChange(editorState) {
this.setState({ editorState });
}
toggleLinkMenu() {
this.setState({ displayLinkTooltip: !this.state.displayLinkTooltip });
}
toggleInline(style) {
this.setState({
editorState: RichUtils.toggleInlineStyle(this.state.editorState, this.options.style)
},
this.editor.focus
);
}
toggleBlock(blockType) {
this.setState({
editorState: RichUtils.toggleBlockType(this.state.editorState, this.options.blockType)
},
this.editor.focus
);
}
render() {
// While I'm developing, I have TextInput hardcoded to display every button in TextInputMenu:
const buttonList = ['bold', 'italic', 'underline', 'hyperlink', 'headline', 'blockquote'];
return (
<div className={styles.textInput} >
<TextInputMenu buttonList={buttonList} toggleInline={this.toggleInline} toggleBlock={this.toggleBlock} />
<Editor // This is the actual Draft.js Editor component where the user types their text
ref={c => (this.editor = c)}
editorState={this.props.editorState}
onChange={this.props.onChange}
placeholder={this.props.placeholder}
/>
</div>
);
}
}
// TextInputMenu */
// Contains a series of buttons that the user can click on to apply an inline
// style, apply a block style, or insert a hyperlink.
//
// The TextInput passes in a buttonList prop containing the names of the buttons
// that it wants to display.
class TextInputMenu extends React.Component {
constructor(props) {
super(props);
this.menuButtons = {
bold: { name: 'Bold', icon: 'fa-bold', options: /* Options here */ },
italic: { name: 'Italic', icon: 'fa-italic', options: /* Options here */ },
underline: { name: 'Underline', icon: 'fa-underline', options: /* Options here */ },
hyperlink: { name: 'Hyperlink', icon: 'fa-link', options: /* Options here */ },
headline: { name: 'Headline', icon: 'fa-header', options: /* Options here */ },
blockquote: { name: 'Block Quote', icon: 'fa-quote-left', options: /* Options here */ }
};
}
getMenuButtons() {
return _.pick(this.menuButtons, this.props.buttonList);
}
render() {
return (
<div className={styles.textInputMenu}>
{_.map(this.getMenuButtons(), ({name, icon, func}) => <TextInputMenuButton key={name} style={name} icon={icon} onClick={func} />)}
{this.getMenuButtons().find('hyperlink') && <LinkMenu />}
</div>
);
}
}
const TextInputMenuButton = ({style, icon, onClick}) => (
<div className={styles.textInputButton}>
<i onClick={() => onClick(style)} className={`fa ${icon}`} />
</div>
);
const LinkMenu = ({active, insertHyperlink}) => (
<Tooltip active={active}>
<form onSubmit={insertHyperlink}>
<label>URL:</label>
<input type="text" name="url" />
<label>Displayed Text:</label>
<input type="text" name="displayText" />
<Button />
</form>
</Tooltip>
);
export { TextInput };
export default TextInput;
Generally, I avoid using refs; however, I need to call the Editor component's "focus" method. Is there a better way to call a child component's methods other than using a ref?
I'm locating editorState in TextInput since it is used by its child components. However, this requires me to also locate methods that mutate editorState in TextInput even if locating them in a child component makes more sense. For example, I would like to move the methods that handle the behavior of TextInputMenu's buttons (toggleLinkMenu, toggleInline, and toggleBlock) to the Menu itself since, as I add more buttons, it is becoming increasingly unwieldy to pass around configuration and handle PropTypes. Is there some alternative pattern? I know the React ecosystem tends to favor Functional programming techniques, but it almost seems like it would be better to take a page from Object Oriented programming and pass a setter function for editorState to the Menu.
Is there a better way to call a child component's methods other than using a ref
I don't know about better, but if you don't want to use a ref, then you can rerender the parent (using a setState, for instance) that will pass a prop to the child - e.g. lift the state up - that you can then use in the componentDidUpdate method of the child. Compare the previous props to the current props and, if the prop you passed is different, then call the method.
Draft.js has a setter function like what you describe: onChange. You are passing it to the Draft.js <Editor>, and could pass it to <TextInputMenu> as well. This is a fairly common pattern when extending a Draft.js editor.
For your focus concern, if you haven't already read it have a look at the official documentation which covers why it is managed imperatively.
Looking at your example, you might also solve this by bind the toolbar buttons with onMouseDown instead of onClick – this way, with preventDefault() on the event, there won't be a focus shift when clicking the buttons and you won't need to call this.editor.focus(). This is for example done in the official rich text example:
class StyleButton extends React.Component {
constructor() {
super();
this.onToggle = (e) => {
e.preventDefault();
this.props.onToggle(this.props.style);
};
}
render() {
let className = 'RichEditor-styleButton';
if (this.props.active) {
className += ' RichEditor-activeButton';
}
return (
<span className={className} onMouseDown={this.onToggle}>
{this.props.label}
</span>
);
}
}
This question is specificcally dedicated to react-quill.
What I want to do : replace some text in a react-quill componement by an other while typing. For example: #s1 will be replace by something like productname(1eq, 100mg, 10ml). Be aware, I don't want to use JQuery.
So far I did it like this (code below), but once the modification is made, I lose the focus and don't know how to get it back. More over the console does throw an error of type "The given range isn't in document."
So basically, it works, but the user has to click in the component to continue typing and if I have more than one react-quill component in the page it will scroll to the firt react-quill object (which is not conveniant when working on the last one).
class Procedure extends Component {
constructor(props){
super(props);
this.state={
content='';
}
}
replaceTagByText(value){
return value.replace(/#(\w+)\s/, myNewValue );
}
handleProcedureContentChange = (value) => {
let newValue = replaceTagByText(value);
this.setState({content:newValue});
};
render() {
return (
<div>
<div style={styles.title}>My title</div>
<ReactQuill
key={"procedure_RTE_" + this.props.experimentId}
value={this.state.content}
modules={modules}
formats={formats}
onChange={this.handleProcedureContentChange}
/>
</div>
);
}
}
Please note that the code is over simplified, I use redux to serve my data, but the general idea is here.
The question is : how to properly replace a text in a react-quill while typing, without loosing focus and keep the cursor at the correct place.
If finally find a solution. The idea is to keep track of the editor and just set the right setSelection. The updated code is bellow.
class Procedure extends Component {
constructor(props){
super(props);
this.state={
content='';
}
}
replaceTagByText(value){
return value.replace(/#(\w+)\s/, myNewValue );
}
//Modification of the code is there
handleProcedureContentChange = (value) => {
let newValueObject = replaceTagByText(value);
this.setState({content:newValueObject.value});
quillRef = this.refs.myQuillRef.getEditor();
//I need that settimeout to do it after the update of my redux logic
setTimeout(() => {
quillRef.focus();
quillRef.setSelection(newValueObject.indexAfterInsertion, 0, myQuillRef);
}, 500);
};
render() {
let myRef = (el) => this.myQuillRef = el;
return (
<div>
<div style={styles.title}>My title</div>
<ReactQuill
key={"procedure_RTE_" + this.props.experimentId}
ref={myRef}
value={this.state.content}
modules={modules}
formats={formats}
onChange={()this.handleProcedureContentChange}
/>
</div>
);
}
}
I have a simple form. If I only have an onSubmit event handler, my inout fields are read only (which I don't want). When I additionally add an onChange event handler to each input field, they stop being read only. My question is:
Do I have to always add an onChange in addition to onSubmit so the input fields are not read only in React
if so, why?
or am I just doing something wrong in my sample code?Thanks
class App extends React.Component {
constructor(props){
super(props);
this.state={
name:''
}
this.testing=this.testing.bind(this);
}
testing(e){
e.preventDefault();
//axios call here, sending data/name
}
render () {
return (
<div>
<form onSubmit={this.testing}>
<input name="name" value={this.state.name}/>
</form>
</div>
)
}
}
Yes, you HAVE TO. You bind inputs value to the this.state.name variable and you have to provide the way for changing this value.
You must read React documentation
https://reactjs.org/docs/forms.html#controlled-components
You set the value for name input, and it always stay this.state.name which is ''. so you have to control it and add a onChange (something like this.setState({ name: event.target.value }))
If you don't want to take control of input just remove the value, and remove name from your state.
I advice you to read about controlled components in react docs
Here is an example of how controlling components will help: (clean up value of input)
class App extends React.Component {
constructor(props){
super(props);
this.state={
name:''
}
this.testing=this.testing.bind(this);
}
testing(e){
e.preventDefault();
//axios call here, sending data/name
}
cleanUp(){
this.setState({ name: "" });
}
render () {
return (
<div>
<form onSubmit={this.testing}>
<input name="name" value={this.state.name} onChange={ (event) => this.setState({name: event.target.value})}/>
<div onClick={this.cleanUp.bind(this)>CleanUp</div>}
</form>
</div>
)
}
}