6

I can't figure out how to pass an event object to the SPFX TextField component. It's only passing the value of the input as a string from what I can see when I console log them out. I would like to handle multiple inputs and handle the on change events to the state as how I am currently handling it with my first handleOnChange() but using the spfx TextField component. Am I handling the onChanged part wrong? Or is it supposed to do that? Or is there any alternatives?

I was thinking that it would work like how I have my input text for Description where as I type in the box, the state gets updated to show the current text and shows it in the label.

Here is a part of my code. I don't really use React so if there are any common problems you see please let me know.

constructor(props: ICrudProps, state: any){
    super(props);
    this.state ={
        Title: '',
        Description: '',
    }
    console.log(props);
    this.handleOnChange2 = this.handleOnChange2.bind(this);
}

private handleOnChange(event): void{
  console.log("Event :" + event);
  console.log("Event name " + event.target.name + " E value" + event.target.value);
  console.log("State " + this.state.Title + " Description " + this.state.Description);
    this.setState({
        [event.target.name]: event.target.value
    })
}
private handleOnChange2(event){
  console.log("Event : " + event);
  console.log("Ename " + event.name + "E value " + event.value  );
  console.log("E Name " + event.target.name + " E value" + event.target.value);
  console.log("State " + this.state.Title + " Description " + this.state.Description);
    this.setState({
        Title: event
    })
}

public render(){
    return(
        <div>
            <form>
                <TextField label='Title' name="Title" defaultValue={this.state.Title} onChanged={e=>this.handleOnChange2(e)}/>
                <TextField label='Title' name="Title" defaultValue={this.state.Title} onChanged={this.handleOnChange2}/>
            {/*<label>Title
                <input name="Title" type="text" value={this.state.Title} onChange={e=> this.handleOnChange(e)}/>
            </label>*/}
            <label>Title: {this.state.Title}</label>
            <br/>
            <label>Descirption
                <input name="Description" type="text" value={this.state.Description} onChange={e=>this.handleOnChange(e)}/>
            </label>
            </form>

            <br/>
            <label className="ms-font-su ms-fontColor-purpleLight">Title: {this.state.Title}</label>
            <br/>
            <label className="ms-font-su ms-fontColor-purpleLight">Description: {this.state.Description}</label>
            <br/>
            <a href="#" onClick={() => this.createItem()}>
                <span>Create item</span>
            </a>&nbsp;
            <br/>
            Status: {this.state.status}

        </div>
    )
}
  • 2
    This works for me <TextField value={this.state.tr.mailBox} onChanged={e => {this.state.tr.mailBox=e}} /> – russellg Apr 21 '17 at 18:05
  • 4
    @russellg doing it inline I think is the way to go, but don't mutate the state without calling this.setState. onChanged={ e => {this.setState({key: value});} } – Jordan Jul 21 '17 at 14:24
1

The helpful folks in the comments never left an answer so here we go.

Taken directly from @Jordan's comment:

@russellg doing it inline I think is the way to go, but don't mutate the state without calling this.setState. onChanged={ e => {this.setState({key: value});} }

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.