ReactJS event.target.value 返回未定义

Question

I've made a form in ReactJS with one text input and when it submits I want to get its value and put it into a variable. But when I console.log() it returns as undefined . How do I fix this? Here is my code.

class App extends Component {
    state = {
        todoTitle: ""
    };

    render() {
        return (
            <div>
                <center>
                    <form
                        onSubmit={(event) => {
                            event.preventDefault();
                            this.setState(todoTitle: event.target.value,);
                            console.log(this.state.todoTitle); // Returns "undefined"
                        }}
                    >
                        <input
                            type="text"
                            autocomplete="off"
                            class="form-control"
                            name="todoInput"
                            placeholder="Enter todo"
                            style={{ width: "400px", height: "50px" }}
                        />
                        <input
                            type="submit"
                            value="Submit"
                            id="submitButton"
                        ></input>
                    </form>
                </center>
        }
    }
}

Answer 1

You can modify your app a bit to get the value on onChange of input textfield, and then store it in the array in case of below example:

export default class App extends React.Component {
  state = {
    todoTitle: "",
    todoList: []
  };

  render() {
    return (
      <div>
        <center>
          <form
            onSubmit={event => {
              event.preventDefault();
              this.setState(
                {
                  todoList: [...this.state.todoList, this.state.todoTitle]
                },
                () => {
                  console.log(this.state.todoList);
                }
              );
            }}
          >
            <input
              type="text"
              autocomplete="off"
              class="form-control"
              name="todoInput"
              placeholder="Enter todo"
              onChange={event => {
                this.setState({ todoTitle: event.target.value });
                console.log(event.target.value);
              }}
              style={{ width: "400px", height: "50px" }}
            />
            <input type="submit" value="Submit" id="submitButton" />
          </form>
        </center>
      </div>
    );
  }
}

Full app here: Stackblitz

Answer 2

There are a few other errors with your code, but I will just answer your question.

setState triggers a re-render, so your state isn't available to log until the next time it runs. You can just log what you put in setState.

console.log(event.target.value);

This question has more info. setState doesn't update the state immediately

Also, you can do a callback.

this.setState({ todoTitle: event.target.value }, () =>
  console.log(this.state.todoTitle)
);

Answer 3

Try this:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { todoTitle: "" };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    event.preventDefault();
    this.setState({ todoTitle: event.target.value });
  }

  handleSubmit(event) {
    event.preventDefault();
    console.log(this.state.todoTitle);
  }

  render() {
    return (
      <div>
        <center>
          <form onSubmit={this.handleSubmit}>
            <input
              type="text"
              autocomplete="off"
              class="form-control"
              name="todoInput"
              placeholder="Enter todo"
              style={{ width: "400px", height: "50px" }}
              onChange={this.handleChange}
            />
            <input type="submit" value="Submit" id="submitButton" />
          </form>
        </center>
      </div>
    );
  }
}

This will change the state on input changes and then logs on submit the state. An alternative would be to just get the input element and its value via getElementById or something similar in React.

Your code was also not very well formatted and a lot of closing tags missed.

Read more here: Get form data in ReactJS

Answer 4

You need to either make a controlled input or useRef for un-controlled input for the React to keep track of your todoTitle state.

To make a controlled input , you will need to use onChange event and a value={this.state.todoTitle} property.

Also on your form, it is best to add an onSubmit event. There is however an option to set the submit on the form submit button also. In that case we need to use onClick={this.handleSubmit} as follows <input type="submit" value="Submit" id="submitButton" onClick={this.handleSubmit} /> .

The below code will work for you:

class Form extends React.Component {
  state = {
    todoTitle: "",
  };

  handleSubmit = (e) => {
    e.preventDefault();
    console.log(this.state.todoTitle);
  };
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input
            type="text"
            autocomplete="off"
            class="form-control"
            name="todoInput"
            placeholder="Enter todo"
            style={{ width: "400px", height: "50px" }}
            value={this.state.todoTitle}
             onChange={(e) => this.setState({ todoTitle: e.target.value })}
          />
          <input type="submit" value="Submit" id="submitButton" />
        </form>
      </div>
    );
  }
}