import {Unity} from 'react-unity-webgl';
...
handleChange(event) {
console.log(event.target.value);
}
render() {
<div>
...
<div>
<Unity src="WebGL.json" />
</div>
...
<div>
<input type="text" name="title" id="title" value={this.state.value} onChange={this.handleChange} />
</div>
...
</div>
}
Here onChange(Input) event was working well but after Unity integration it does not work at all. I tried with other input components but same result.
I solved this problem by myself and I posted the answer via below links.
Here are the answer for this question.
Related
Sup guys!
Can I have some help to understood this assessment challenge? I've allready send it, but a horrible doubt keep bouncing on my head:
I was ordered to complete a simple React app, that loads user input in a component, and pass those data as props to another component, rendered from another one. Something like this:
function DataInput(){
const [input, setInput]=useState({
firstName:'',
lastName:'',
phone:'',
)}
function handleChange(e){
setInput({
...input,
[e.target.name]:e.targe.value;
)}
}
function handleSubmit(){
/* dunno if this function is usefull to something. Can't figure out how to pass props from
a child ( DataInput ) to another one ( ContactList)without using Redux to store a Global State.
*/
}
return(
<form>
<input
type="text"
name="firstName"
placeholder="First Name"
value={input.firstName}
onChange={handleChange}
/>
<input
type="text"
name="lastName"
placeholder="Last Name"
value={input.lasttName}
onChange={handleChange}
/>
<input
type="text"
name="phone"
placeholder="Phone Number"
value={input.phone}
onChange={handleChange}
/>
<button onClick={handleSubmit}>Add User</button>
</form>
)}
function ContactList(props){
return(
<div>
<label>{props.firstName}</label>
<label>{props.lastName}</label>
<label>{props.phone}</label>
</div>
)}
function App(){
render(){
<IngresoDatos />
<ContactList />
}
}
ReactDOM.render(<App/>, document.getElementById('root'))
I am trying to get useFormik to validate radio groups, but it seems not to work, here is a brief example of what I am doing, whenever I submit the form after checking any of the radio input, formik throws validation error, ({currState:"you must choose property state"}), even though I choose an option.
I realized getFieldProps attaches value field to the radio, so i tried using defaultValue then react throws an error about choosing one of controlled and uncontrolled components.
import { useFormik } from "formik"
export function ListProperty(){
const { handleSubmit, getFieldProps, touched, errors } = useFormik(
{
initialValues: {
currState:"",
},
validationSchema:Yup.object().shape({
currState:Yup.string().required("you must choose property state")
}),
return (
<form onSubmit={handleSubmit} >
<div className="form-group inline">
<div className="form-control">
<input type="radio"
name="currState"
{...getFieldProps("currState")}
value="serviced"
/>
<label>serviced</label>
</div>
<div className="form-control">
<input
type="radio"
value="furnished"
name="currState"
{...getFieldProps("currState")}
/>
<label>furnished</label>
</div>
<div className="form-control">
<input
type="radio"
value="newlybuilt"
name="currState"
{...getFieldProps("currState")}
/>
<label>newly built</label>
</div>
</div>
<button type="submit">submit </button>
</form>
)
}
I gave up on the implementation with getFieldProps and did it simpler, like this:
import { useFormik } from 'formik'
export default function Component() {
const formik = useFormik({
initialValues: {
radioButtonValue: ''
},
onSubmit: values => console.log(values)
})
const handleRadioButtons = e => formik.values.radioButtonValue = e.target.value
return (
<form onSubmit={formik.handleSubmit}>
<input
type="radio"
id="one"
name="group"
value="One"
onChange={e => handleRadioButtons(e)}
required
/>
<label htmlFor="one">One</label>
<br />
<input
type="radio"
id="two"
name="group"
value="Two"
onChange={e => handleRadioButtons(e)}
/>
<label htmlFor="two">Two</label>
<button type="submit">Submit</button>
</form>
)
}
Beware, if you use formik.values.radioButtonValue value as a useEffect dependency, then setting it like this: formik.values.radioButtonValue = e.target.value not gonna trigger the change, and useEffect won't launch (at least in my case it didn't). As an alternative, you gonna have to implement some kind of condition check with this value in your useEffect code
You need to map onChange like below.
<input
type="radio"
value="furnished"
name="currState"
onChange={getFieldProps("currState").onChange}
/>
I'm building my app with emoji-mart lib.
I have text input like this:
<FormGroup>
{emoji}
<EmojiMartPicker
set='emojione'
onSelect={(emoji) => console.log(emoji)}
onChange={this.onChange}
>
<Input
type="text"
name="emotion"
bsSize="sm"
autoComplete="off"
value={report.emotion.colons}
onChange={this.onHandleFormChange}
required
/>
</EmojiMartPicker>
</FormGroup>
Now, I wanna display Emoji Object to text input. In value attribute. I want to display emoji, not value text.
How can we do that?
See my detail problem:
https://codesandbox.io/s/646xom9y1z
Sorry, I found that just only add native props to solved my problem.
Like this:
value={report.emotion.native}
That's it..
I solve this problem take a look.
<div className="chatemoji">
<ButtonToolbar >
<div onClick={e => e.preventDefault()}>
{/* <EmojiField
name="textarea"
onChange={this.onChange.bind(this)}
fieldType="input"
/> */}
<EmojiField name="my-textarea" onChange={this.onChange.bind(this)} fieldType="input" />
</div>
</ButtonToolbar>
</div>
In onChange you have to call this code
onChange(e,value) {
this.state.data += value;
this.setState({ data: this.state.data });
}
I am trying to get my React CSS Transition classes applied to my DOM elements. I have done all of the following:
Referenced this question, to check correct use case and this other question making sure I am using a key attribute even when rendering one child.
If I am understanding correctly the library has migrated and the way we import the library is a little different, but let's look at what I'm working with.
Relevant code:
import {CSSTransitionGroup} from "react-transition-group";
class NewTournament extends React.Component{
render(){
const style = {
active: { display: "flex", flex: 5 },
inactive: null
}
const dynamic = this.props.editTournament != null ? style.active : style.inactive
return(
<div className="left-column">
<div className="tournament-creator">
<div id="banner">
<h1>Build A Tournament Here</h1>
</div>
<form action="" className="tournamentBuilder">
<input type="text" placeholder="Tournament Name" ref="nameRef" onChange={() => this.recordName()}/>
<input type="number" defaultValue={prelims} ref="prelimRef" onChange={() => this.updatePrelims()} />
<input type="number" defaultValue={outRounds} ref="outRoundRef" onChange={() => this.updateOutround()}/>
<input type="text" placeholder="Notes" ref="notesRef" onChange={() => this.recordNote()}/>
</form>
<div id="submitButton" onClick={() => this.createTournament()}>
Create Tournament
</div>
</div>
<CSSTransitionGroup className="tournament-editor"
component="div"
transitionName="editBoxRail"
transitionEnterTimeout={10000}
transitionLeaveTimeout={10000}
style={dynamic}>
<TournamentEditor key="editor" />
</CSSTransitionGroup>
</div>
)
}
}
So you click a button in the UI and then the tournament editor component goes from display: none to display: flex. It is my understanding that this will trigger the classes to be applied and taken away, but they are never applied the only way I have been successful in doing so is adding the transitionAppear={true} attribute where they just sit there and never go away.
What am I not doing correctly? This has me stumped because I've successfully worked with the older library and I don't know why this is giving me so much trouble.
I have a component with input, is there any way to focus using the name?
<div onClick={this.handleClick.bind(this)}>
... Some more code ...
<input type="text" name={this.props.name} onChange={this.props.onChange} autoFocus/>
... Some more code ...
</div>
On click of the parent div, I have a on click event attached to it.
handleClick(e) {
// Need to focus may be using refs, but not sure how to do it.
return this.props.onClick(this.props.name);
}
Component:
<div onClick={this.handleClick.bind(this)}>
... Some more code ...
<input type="text" ref={(input) => { this.input = input; }} name={this.props.name} onChange={this.props.onChange} autoFocus/>
... Some more code ...
</div>
Click handler:
handleClick(e) {
this.input.focus();
return this.props.onClick(this.props.name);
}
or
Component:
<div onClick={this.handleClick.bind(this)}>
... Some more code ...
<input type="text" ref={this.props.name} name={this.props.name} onChange={this.props.onChange} autoFocus/>
... Some more code ...
</div>
Click Handler:
handleClick(e) {
this.refs[this.props.name].focus();
return this.props.onClick(this.props.name);
}