Question

我正在将ReactJs与React钩子和上下文Api一起使用，以普通的html格式，我必须输入类型为text的标签，当我试图知道我们使用“ typeOf”获得什么类型的值时在javascript中起作用。输入字符串值时得到字符串类型，但是输入数字时显示未定义。

const [name, setName] = useState('');
const [price, setPrice] = useState('');
const [movies , setMovie] = useContext(MovieContext) 

const updateName = (e) => {
    setName(e.target.value)
}

const updatePrice = (e) => {
    setPrice(e.target.price);
}

const addMovie = (e) => {
    e.preventDefault();
    setMovie(prevMovies => {
       return [...prevMovies, { name: name, price: price }]
    })
    console.log(typeof(price)) //getting undefined
    console.log(typeof(name)) //getting string 
}

return ( 
    <div>
       <form onSubmit={addMovie}>
           <input type="text"  name="name" value={name} onChange={ updateName }/>
           <input type="text"  name="price" value={price} onChange={ updatePrice } />
           <button>Submit</button>
       </form>
    </div>
 );

Answer 1

您应该将值解析为数字，因为您没有price属性来存储值。

setPrice(Number(e.target.value));

此外，您也可以将输入的类型更改为数字

Answer 2

HTML仅具有一种数据类型：文本（字符串）。

从HTML元素提取的所有值都是字符串。如果您需要对值进行区别对待，则取决于您的JavaScript来转换类型。对于数字数据，有几种方法，但也许最简单的方法是在值前加上一个算术运算符like +。

let input = document.querySelector("input");

input.addEventListener("blur", function(){
  console.log("Data is: " + typeof input.value);
  console.log("Converted type is: " + typeof +input.value);
});

Enter a number and press TAB: <input type="number">

如果您的数据以数字开头，但后面还有非数字字符，那么parseInt()和parseFloat()将提取数字并在找到非数字值时停止：

let input = document.querySelector("input");

input.addEventListener("blur", function(){
  console.log("Data is: " + typeof input.value);
  // It's a best-practice to always specify the second argument for parseInt()
  // to ensure the correct conversion.
  console.log("Converted type is: " + typeof parseInt(input.value, 10));
});

Enter a number and press TAB: <input type="number">

特别指定为type =“ number”时，输入字段值的默认类型是什么？

2 个答案: