Реагировать состояние обновления кнопок радио

16*((n+8)/16) - это формула, которую вы хотите, если, в частности, вы хотите конвертировать 8 до 16 (она одинаково близка к 0 по 16, поэтому невозможно решить, как ее преобразовать, основываясь исключительно на «ближайшем множестве», концепция, вы должны решить! -), и, конечно, последовательно от 24 до 32, от 40 до 48 и т. д. Используйте +7 вместо +8, если вы предпочитаете преобразовывать 8 в 0, а не в 16 (и последовательно от 24 до 16 и т. Д.).

Использовать общий X в вместо hardcoded 16, тогда формула X*((n+X/2)/X) (с тем же условием, что и в предыдущем абзаце, если X четно).

Редактирование: нет необходимости возиться с плавающей запятой числа, как предлагают другие ответы, но вы do должны умножаться на X (что я ошибочно пропустил).

1
задан Andrew 18 January 2019 в 12:27
поделиться

2 ответа

Это, как вы можете определить два набора кнопок группы радио, в пределах одного элемента формы.

<form>
<fieldset id="group1">
<input type="radio" value="value1" name="group1" onChange={this.handleChangea}>
<input type="radio" value="value2" name="group1" onChange={this.handleChangea}>
</fieldset>

<fieldset id="group2">
<input type="radio" value="value1" name="group2" onChange={this.handleChangeb}>
<input type="radio" value="value2" name="group2" onChange={this.handleChangeb}>
<input type="radio" value="value3" name="group2" onChange={this.handleChangeb}>
</fieldset>
</form>

Чтобы установить состояние, просто напишите это в методе смены рукоятки.

handleChange=(event)=> {
    console.log(event.target.value);
    this.setState({
      selectedoptionId : event.target.value
    })
    tempobj["optionId"] = event.target.value
  };

Об этом tempobj["optionId"] = event.target.value. Поскольку вы итеративно добавляете компонент формы, вам необходимо сохранить ответы, чтобы мы не потеряли предыдущий набор ответов. Для этого я сохраняю параметры в самом объекте JSON. с OptionID в качестве ключа и ответов в соответствующих значениях JSON. Я мог бы дать более подробный ответ о том, как я сохраняю эти значения, но только если вам это нужно.

0
ответ дан mastershefi 18 January 2019 в 12:27
поделиться

Основная проблема в вашем отображении состоит в том, что вы забыли вернуть любое значение. Вы можете добавить оператор return или просто удалить скобки.

Вам также необходимо установить название каждой кнопки, чтобы быть уверенным, что пользователь может выбрать только одну кнопку за раз.

Теперь, чтобы обработать изменения, вам нужно установить значение каждого входа в имя поля и связать его с функцией изменения, которая отправит имя, которому оно принадлежит:

<input
    type='radio'
    value={this.state[name]}
    name={name}
    key={opt.id}
    onChange={this.selectionChanged(name)}
/>

И изменить функцию обработки:

selectionChanged = type => ev => {
    this.setState({ [type]: ev.target.value })
    console.log('Selection of ' + type ' changed to ' + ev.target.value)
}

Рабочий пример:

const data = {
    "food": [
        {
            "id": 1,
            "name": "Pizza",
            "options": [
                {
                    "id": 11,
                    "name": "Margherita",
                },
                {
                    "id": 12,
                    "name": "Pepperoni",
                },
                {
                    "id": 13,
                    "name": "Prosciutto",
                },
                {
                    "id": 14,
                    "name": "Prataiolo",
                }
            ]
        },
        {
            "id": 2,
            "name": "Size",
            "options": [
                {
                    "id": 21,
                    "name": "S",
                },
                {
                    "id": 22,
                    "name": "M",
                },
                {
                    "id": 23,
                    "name": "L",
                },
                {
                    "id": 24,
                    "name": "XL",
                },
            ]
        }
    ]
}

class PizzaList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            Pizza: '',
            Size: ''
        }
    }

    selectionChanged = type => ev => {
        this.setState({ [type]: ev.target.value })
        console.log('Selection of ' + type + ' changed to ' + ev.target.value)
    }

    render() {
        return (
            <div>
                {this.props.food.map(({ id, name, options }) =>
                    <div key={id}>
                        <h2>{name}</h2>
                        {options.map((opt) =>
                            <input
                                type='radio'
                                value={opt.name}
                                name={name}
                                key={opt.id}
                                onChange={this.selectionChanged(name)}
                            />
                        )}
                    </div>
                )}
            </div>
        )
    }
}

ReactDOM.render(<PizzaList food={data.food}/>, document.getElementById('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.1/umd/react-dom.production.min.js"></script>
<div id='root'/>

0
ответ дан Treycos 18 January 2019 в 12:27
поделиться
Другие вопросы по тегам:

Похожие вопросы: