ReactJs: значение по умолчанию textArea не обновляется - PullRequest
Новая
       11

ReactJs: значение по умолчанию textArea не обновляется

0 голосов
/ 10 января 2020

Я работаю над формой в моем ReactJs приложении. Что я хотел бы сделать:

1 / выбрать черновик письма из массива черновиков по его идентификатору // ok

2 / отобразить заголовок, текст и местоположение выбранного черновик письма в форме ниже // хорошо

3 /, тогда пользователь должен иметь возможность редактировать все поля // не хорошо!

Вот что я сделал: 

class NewLetter extends Component {

    constructor(props) {
        super(props)
        this.state = {
            city: "",
            title: "",
            letterBody: "",
        }
        this.handleChange_city = this.handleChange_city.bind(this);
        this.handleChange_letterBody = this.handleChange_letterBody.bind(this);
        this.handleChange_title = this.handleChange_title.bind(this);
    }

    handleChange_city(e) {
        this.setState({
            city: e.target.value
        });
    }

    handleChange_letterBody(e) {
        this.setState({
            title: e.target.value
        });
    }


    handleChange_title(e) {
        this.setState({
            letterBody: e.target.value
        });
    }


    render() {
        return (

            <form className="containerLetter">

                <div className="form-group">
                    <input type="text" className="form-control" id="letterLocation" placeholder="where are you?" value={this.props.city} onChange={this.handleChange_city}/>

                </div>

                <div className="form-group">
                    <input type="text" className="form-control" id="letterTitle" placeholder="give a title to your letter" value={this.props.title} onChange={this.handleChange_title} />
                </div>

                <div className="form-group">
                    <textarea type="text" className="form-control" id="letterBody" placeholder="Letter content" value={this.props.letterBody} onChange={this.handleChange_letterBody} />
                </div>

                <button className="actionButton">Send the letter</button> <br />
                <button className="actionButton">Save as draft</button>

            </form>


        )
    }
}

export default NewLetter

Если я использую value, поля недоступны для редактирования. Если я использую defaultValue, поле доступно для редактирования, но при изменении значения по умолчанию React не выполняет повторную визуализацию. Значения передаются в качестве реквизитов родительским компонентом: 

class DraftLetters extends Component {

    constructor(props) {
        super(props)
        this.state = {
            selectedDraftIndex: 0,
        };
        this.handleChange = this.handleChange.bind(this);
    }


    getListOfDrafts = () => {
        var list = []
        for (let i = 0; i < this.props.drafts.length; i++) {
            list.push(<option value={i}> {this.props.drafts[i].redactionDate} </option>);
        }
        return (list);
    }


    handleChange(e) {
        this.setState({
            selectedDraftIndex: e.target.value,
        })
    }


    render() {
        return (
            <div >

                {(this.props.drafts.length != 0) &&
                    <div className="form-group selectLetter">
                        <label for="sel1">Select the draft:</label>
                        <select onChange={this.handleChange} className="form-control" id="sel1">
                            {this.getListOfDrafts()}
                        </select>
                    </div>
                }

                {(this.props.drafts.length == 0) &&
                    <div className="form-group">
                        <p className="noLetter"> You haven't saved any draft.</p>
                        <img width="400px" className="img-fluid" src={painting} alt="tableau"></img>
                    </div>
                }

                <div>
                    <br />
                    {(this.props.drafts.length != 0) &&
                        <NewLetter city={this.props.drafts[this.state.selectedDraftIndex].city}
                            title={this.props.drafts[this.state.selectedDraftIndex].title}
                            letterBody={this.props.drafts[this.state.selectedDraftIndex].letterBody}></NewLetter>
                    }

                    {this.state.selectedDraftIndex}
                </div>
            </div>
        )
    }
}


export default DraftLetters

Кажется, это хорошо известная проблема

Это то, что я обнаружил: defaultValue изменение не отображает повторно вход

Реактивный ввод defaultValue не обновляется с состоянием

https://github.com/facebook/react/issues/4101

Есть ли сегодня исправить эту проблему?

...