Question

我将“ isAvailable”属性存储为布尔值，但是当handleChange函数运行时，它将布尔值变量转换为字符串。是否可以在不创建另一个用于处理更改的功能的情况下将“ isAvailable”保持为布尔值？

这是我渲染的选择框：

<select
    type='text'
    name="isAvailable"
    className='itemAvailability form__input'
    value={this.props.details.isAvailable}
    onChange={this.handleChange}
>
    <option>Availability</option>
    <option value={true}>Available</option>
    <option value={false}>Not Available</option>
</select>

这是handleChange函数

handleChange = (e) => {
    const updatedItem = {
        ...this.props.details,
        [e.currentTarget.name]: e.currentTarget.value
    }

    this.props.updateItem(this.props.index, updatedItem);
}

Answer 1

HTML option元素的value属性只能是字符串。如果要获取布尔值，则可能应该设置radio input field

Answer 2

这是我针对同样问题的解决方案。我已经更新了handleChange函数，如下所示。

handleChange = (e) => {
    let updatedValue = e.currentTarget.value;

    if (updatedValue === "true" || updatedValue == "false") {
        updatedValue = JSON.parse(updatedValue);
    }

    const updatedItem = {
        ...this.props.details,
        [e.currentTarget.name]: updatedValue
    }

    this.props.updateItem(this.props.index, updatedItem);
}

Answer 3

后来，但是我想我会展示如何处理类似的事情。一旦我的选项命中了mongo db，该值将设置为布尔值，但是在刷新页面之前，redux将选项存储为字符串，因此添加了对该字符串的检查以显示其间的变化。

onChangeHandler = (event) => {
    this.props.userInfoUpdate(
        event.target.name, event.target.value
    )
}



        const display_address = () => {
        if(!this.props.display_address || this.props.display_address === 'true'){
            return (
                <select name='display_address' onChange={this.onChangeHandler} >
                    <option value={true}>Yes</option>
                    <option value={false}>No</option>                    
                </select>
            )
        }else{
            return (
                <select name='display_address' onChange={this.onChangeHandler} >
                    <option value={false}>No</option>
                    <option value={true}>Yes</option>                                            
                </select>
            )
        }
    }

在React中为<option>值使用布尔值

3 个答案: