“.value”是输入元素的属性吗？

Question

return (
      <input 
        type="text" 
        placeholder="Type a color"
        onChange={(e)=> {
          changeColor(e.target.value)
        }}
        ></input>
  )

While I was studying React, I saw this code above, and I could not fully understand why I am able to display value typed into the input element. (I didn't put HTML file this time). I know "e" is an event and by using target property, it's referencing the object, but what is ".value" in this case? I saw one website says it is HTML DOM property, which specifies the value of the attribute, but is it HTML DOM property for input element or something else? I appreciate your help!

Answer 1

By default, HTML input element has a value attribute. You can set it to have a default text appear in the input on page load.

You correctly mentioned e is an event object. It has an attribute target which is the element that created this event. So in your case e.target.value refers correctly to the value of the input element whos value changed.

Answer 2

value is an attribute for input tag as seen from here in W3 Documentation .

You are correct that e is an event, and by using target property, you are able to determine the element that caused the event.

Further reading about this can be seen in FreeCodeCamp . I recommend doing so, and you will see the most common use of this practice.