Updating state with SPFX TextField Component? Office Fabric React

Question

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>
    )
}

Answer 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});} }

Answer 2

import { ISPFormFieldProps } from './SPFormField';

import * as tinymce from 'tinymce';
import 'tinymce/themes/silver';
import 'tinymce/plugins/paste';
import 'tinymce/plugins/link';
import 'tinymce/plugins/image';
import 'tinymce/plugins/imagetools';
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/print';
import 'tinymce/plugins/autolink';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/table';
import 'tinymce/plugins/preview';
import 'tinymce/plugins/anchor';
import 'tinymce/plugins/fullscreen';
import 'tinymce/plugins/media';
import 'tinymce/plugins/imagetools';
import { Editor } from "@tinymce/tinymce-react";

const SPFieldRichTextEdit: React.SFC<ISPFormFieldProps> = (props) => {
    var counter = 0;
    tinymce.init({});
    const { Name, RichTextMode } = props.fieldSchema;
    const value = props.value ? props.value : '';
    if (tinymce.editors[`Editor-${Name}`] !== undefined) {
        tinymce.editors[`Editor-${Name}`].setContent(value);
    }

    const editorConfig = {
        "relative_urls": false, "convert_urls": false, "remove_script_host": false,
        height: 300,
        plugins: [
            "paste advlist autolink lists link print preview anchor",
            RichTextMode === 1 ? 'image media table paste imagetools' : 'fullscreen'
        ],
        skin_url: "https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.0.1/skins/ui/oxide"
    };
    return <Editor
        id={`Editor-${Name}`}
        init={editorConfig}
        initialValue={props.value}
        onChange={(event) => {
            if (counter == 0) { event.target.getContent(); }
            else { props.valueChanged(event.target.getContent()); }
            counter++;**
        }
        }
    />;
};

export default SPFieldRichTextEdit;