ReactJS：如何从输入字段的下拉列表中显示选定的值？

Posted 2023-03-16

【中文标题】ReactJS：如何从输入字段的下拉列表中显示选定的值？

【英文标题】：ReactJS: How to display selected value from dropdown in input fields?

【发布时间】：2020-05-31 01:04:16

【问题描述】：

我正在尝试执行以下操作：

用户可以从下拉菜单中选择一个计算。选定的数字（来自计算）出现在输入字段中，用户可以更改计算。按下“添加”按钮后会显示修改后的计算。修改后的计算也应在下拉菜单中以红色显示。

我设法正确计算，但所选数字未出现在输入字段中。我必须做些什么来更新输入字段的值？

这是我的代码：

import React from 'react';

export default class Lisatehtava1 extends React.Component 
    constructor(props) 
        super(props);
        this.state = 
            num1: 0,
            num2: 0,
            total: 0,
            results: [],
        
    

    handleChange = (e) => 
        const  name, value  = e.target;
        this.setState(
            [name]: value
        )
    


    add = () => 

        const  num1, num2  = this.state;

        this.setState(
            total: (parseInt(num1) + parseInt(num2))

        , () => 

            let result =  num1: this.state.num1, num2: this.state.num2, total: this.state.total ;

            const t = [...this.state.results, result];

            this.setState( results: t , () => 
                this.setState( num1: "" , () => 
                    this.setState( num2: "" );

                );
            );
        )
    

    render() 

        let dropdown = this.state.results.map((item, id) => 
            return <option key=id>item.num1 + item.num2 = item.total</option>
        );

        return (
            <div>
                <div>
                    <label>Numero 1</label>
                    <input type="text" name="num1" onChange=this.handleChange />
                </div>
                <div>
                    <label>Numero 2</label>
                    <input type="text" name="num2" onChange=this.handleChange />
                </div>
                <button onClick=this.add>Add</button>
                <div><select onChange=this.handleChange>dropdown</select></div>
            </div>
        );
    

【参考方案1】：

<input type="text" name="num2" onChange=this.handleChange />

在输入中，您没有分配调用 onChange 函数后获得的值。所以它总是空的。

写成：

<input type="text" name="num2" onChange=this.handleChange value=this.state.num1 />

【参考方案2】：

有一些事情你必须改变。

1.在输入标签中你必须包含一个value属性

<input type="text" name="num1" onChange=this.handleChange value=this.state.num1 />

类似于第二个输入标签

2.您可以对选择标签事件中的值使用拆分。

<select onChange=(e)=>
                      this.setState(
                        num1:e.target.value.split(" ")[0],
                         num2:e.target.value.split(" ")[2]
                      )
                >dropdown</select>

您可以查看实时示例https://stackblitz.com/edit/react-fm8wd4

【讨论】：

我仍在为这种样式苦苦挣扎：修改后的计算应在下拉菜单中以红色显示。我应该在样式组件中使用条件样式吗？我不知道该怎么做。很抱歉这些简单的问题。我只是一个初学者...

@emmip 是的，您应该使用条件样式。为下拉菜单制作 2 种不同的样式，并在要显示的位置添加条件。可以参考这个***.com/a/58339902/6181916