Question

我有一个“受控” React组件，用于非常简单的下拉列表，如下所示：

const MyDropDown = ({field, handleChange}) => {

   return(

      <select name="myField" value={field} onChange={handleChange}>
         <option value="1">Apples</option>
         <option value="2">Oranges<option>
         <option value="3">Bananas</option>
      <select>
   );
}

MyDropDown.propTypes = {
   field: PropTypes.number.isRequired,
   handleChange: PropTypes.func.isRequired
}

export default MyDropDown;

最初，我在减速器中将field的值设置为0。这是正确的做法，因为值始终是一个数字。我遇到的问题是：

最初，一切都很好，但是当我做出选择时，我会收到一个警告，说明提供了类型字符串的无效道具并且它正在期待一个数字。

如何确保选项中的值是数字而不是字符串？

顺便说一下，我尝试不使用引号作为选项值，但React似乎不喜欢它，即<option value=1>Apples</option>

Answer 1

我认为你的handleChange看起来像这样

using System;
using System.Threading.Tasks;
using Microsoft.OneDrive.Sdk;
using Microsoft.OneDrive.Sdk.Authentication;

namespace SecondTake_OneDrive_SDK
{
class Program
{
    [STAThread]
    static void Main()
    {
        RunTask().Wait();
    }

    static async Task RunTask(OneDriveClient oneDriveClient = null)
    {
        Task authTask = null;
        if (oneDriveClient == null)
        {
            var msaAuthenticationProvider = new MsaAuthenticationProvider("CLIENT_ID",null, "https://login.live.com/oauth20_desktop.srf", new[] { "onedrive.readonly", "wl.signin" }, null, new CredentialVault("CLIENT_ID));
            authTask =  msaAuthenticationProvider.AuthenticateUserAsync();
        }
        try
        {
            await authTask;
        }
        catch (Exception e)
        {
            Console.WriteLine(e);
            throw;
        }
    }
}

这里的问题是html需要在属性值周围引用，所以本质上e.target.value解析为字符串。一个简单的解决方法是使用

将其解析为数字

handleChange(e) {
    this.setState({ val: e.target.value});
}

从React组件中的Select中发送数字而不是字符串

1 个答案: