4

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>
    )
}
  • 1
    This works for me <TextField value={this.state.tr.mailBox} onChanged={e => {this.state.tr.mailBox=e}} /> – russellg Apr 21 '17 at 18:05
  • 2
    @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

Your Answer

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

Browse other questions tagged or ask your own question.