score:4
Accepted answer
you can use ref
to access dom node:
var playerselect = react.createclass({
getinitialstate: function() { return { names: [] } },
getplayers: function(event) {
event.preventdefault();
var playernames = []
for (var i = 0; i < this.props.numplayers; i++) {
var playername = this.refs['player-' + i].getdomnode().value.trim();
playernames.push(playername);
}
this.setstate({ names: playernames });
},
render: function() {
var players = []
for (var i = 0; i < this.props.numplayers; i++) {
players.push(
<li key={'player-' + i}>
<input ref={ 'player-' + i } type="text"/>
</li>
);
}
return (
<div classname="page">
<form classname="player-select">
<ol classname="players">
{players}
</ol>
<button onclick={this.getplayers}>done</button>
</form>
<div>{ this.state.names.join(', ') }</div>
</div>
);
}
});
also remember:
- when you create array of elements every single one has to have unique
key
- don't modify props of your component to communicate with outside modules. use some other library which provides models to communicate between components, for example backbone or flux ( in my example for simplicity i just saved collected player names to components state ).
Source: stackoverflow.com
Related Query
- ReactJS: How to access an array of form input children?
- How to store input values of a form in a array to print array data in table list in Reactjs
- How to disable form submit button until all input fields are filled?! ReactJS ES2015
- reactjs how to input multiple file from form
- how to update input text which is render by array map in REACTJS
- how can i setState inside of array of objects taking user input from form
- How can a ReactJS form submission access field values?
- How to generate an array for each input value from textBox in reactJs
- How to access Formik form props using cypress in Reactjs
- How to access the input value of children component from parents component in ReactJs?
- How to store, submit and copy input from form to another component in ReactJS
- How to access value based on index from array defined in state ReactJS
- reactjs how to handle value change on input array properly
- How to disable submit button in modal where the form is children ReactJS
- How can i get values from multiple input boxes on form submit and store the values as an object in an state array for React?
- how to push the form data into array while clicking the submit in reactjs
- How to add a input from form too array
- How to clear form input in ReactJs after add product successfully
- Input an array from a form and post it to the server in ReactJs
- How can Parent Form Access Children Inputs?
- how can i store form data as an array to localstorage in reactjs
- How to reset ReactJS file input
- How to access the "key" property from a reactjs component
- How to get input text value on click in ReactJS
- ReactJS - How can I access the displayName of a component using javascript?
- How to display a image selected from input type = file in reactJS
- How to submit the form by Material UI Dialog using ReactJS
- How to trigger INPUT FILE event REACTJS by another DOM
- How to pass form values as FormData in reactjs on submit function
- How do you conditionally disable a form input in react?
More Query from same tag
- Chakra Card component is mapping vertically rather than horizontally
- Update React state asynchronously from multiple sources
- ReactJS -How to create multistep component/form with single path using React Router
- Styling a specific word in a data gotten from an api which is populated on a screen
- How to define a button and a function inside js (React)
- How can I optimize my validation code in reactjs?
- Counter with react useState hook is not working right
- How to use callback function in React hooks when value is submitted?
- How to push element without activating onClick in ReactJS?
- React Router going back two pages while preserving history
- Custom Formik validation for input text field based on onBlur of other field
- Material UI Tooltip does not appear when rendered inside of a custom Modal component
- How to get acces to a child useState in React?
- error "error couldn't find package "yyy" when building project on ci pipeline and when trying to add packages via yarn
- how to render data in vertical Tab
- Routing is happening in url but page is not rendering in reactjs
- React useEffect() alert once after dependences change
- Re-render List after deleting item in child component
- Separate Key/Value pairs after parsing for styling
- How can I change URL without render using React Router 6?
- react hook form: how can i validate a group of radio buttons or checkboxes to ensure at least one is selected
- Most effective way to re-evaluate useState when its initial value changes?
- Using Promise when extracting data from Supabase into React
- How can I make an image preview show up on a react project?
- How to create a typical country/province (or state) dependency dropdowns with react-jsonschema-forms?
- react I want to overwrite the value of an object
- Why child component should be wrapped with Router as its parent component
- How to check for object properties in a conditional statement in JavaScript?
- React component only updating once
- React.js - Receiving error "Nothing was returned from render." from switch statement