如何在 ReactJS 中获取用户输入时显示具有 3 个属性的只读字段？

Question

The user will select currency,write amount, and select time(hour,day,month,year). I need to make a functional component which takes all these values provided by user and displays a read-only value in 1 box (as show).

The user input box is supposed to look like this

Also, It would be very helpful if anybody can style it similarly or atleast tell how can I. (using CSS, scss, antD, tailwind anything).

PS: Don't avoid mentioning the placeholder.

Answer 1

Try to do it step by step. Create what you want in the simplest/ugliest way possible. It doesn't matter how it looks, if it works it is enough.

1. You need to create a component which renders a select for currency, select for time, an input for value and a div to display the currency symbol.
2. Use javascript to change the currency symbol when user selects a currency using the select. Your component should be able to handle value and onChange that receives from the parent component.
3. All you have to do is to use CSS. Read mui documentation for components and inspect elements to see how you should change styles. You can also take a look at mui github code.