1

How te get the value from input, i always get the default value from the input field. This is my code:

export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {

public async render() {

this.domElement.innerHTML = `
      <div class="${ styles.visitenkarten}">
        <div class="${ styles.container}">
          <div class="${ styles.row}">
            <div class="${ styles.column}">


              <p>Name</p>
                <input type="text" id="inputName" name="fname" value=${escape(this.properties.Name ? this.properties.Name : result1.displayName)}><br/>


            </div>
          </div>
        </div>
      </div>`;


    var inputName = (document.getElementById("inputName")["value"]);
    console.log(inputName);
}

Thanks for your help.

2

I think you want to get the input value when the input value has been changed.

In you code, you get the input value after it has been rendered. So that, you will get the default value of it.

To get the value after it is changed, you need onChange event with React controls.

For example:

private _onChange = (e: React.KeyboardEvent) => {
    const name = this.props.data.Name;
    const value = (e.target as HTMLInputElement).value;
    this.props.onChange(name, value);
}

public render(): JSX.Element {
    return (
        <input
            type="text"
            value={this.props.data.Value}
            onChange={this._onChange}/>
    );
}

Refer to: https://coderwall.com/p/irfj6g/value-of-input-field-react-typescript

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.