Question

我使用React和Redux以及NASA火星漫游者API制作了一个示例项目，它基本上是一个输入字段，您可以将日期设置为YYYY-MM-DD格式并按Enter键，它会返回一行显示您日期的数据放入了火星车的名字，以及当天火星车拍的照片。现在我已经将我的React应用程序编码到它所获得的流动站的位置，这是一个叫做“机会”的流动站。

我希望此应用能够选择下拉菜单，其中包括选择机会＆＃39;，＆＃39;好奇心＆＃39;精神＆＃39;，但我不确定该怎么做。

我不知道该怎么办。我曾尝试在名为rover_select的下拉菜单中创建一个新的基于类的组件，并在那里拥有它自己的状态，但是从来没有能够实现这一点并且不确定我的方法是否正确。

我有一个名为query_bar的搜索栏组件，其中包含rover_select的子组件，该组件是下拉菜单的代码所在。

这是query_bar.js

class QueryBar extends Component {
    constructor(props) {
        super(props);

        this.state = { searchdate: '' };

        this.onInputChange = this.onInputChange.bind(this);
        this.onFormSubmit = this.onFormSubmit.bind(this);
    }

    onInputChange(event) {

        this.setState({ searchdate: event.target.value });
    }

    onFormSubmit(event){
        event.preventDefault();

        //we need to fetch rover data

        console.log("my test",this.state.searchdate)


        this.props.fetchRoverData(this.state.searchdate);
        this.setState({ searchdate: '' });
    }


    render() {
        return (
            <form onSubmit={this.onFormSubmit} className="input-group">

                    <input placeholder="YYYY-MM-DD" className="form-control" value={this.state.searchdate}  onChange={this.onInputChange} />

                    <span className="input-group-btn">
                        <button type="submit" className="btn btn-secondary">Submit</button>
                    </span>
                    <SelectRover />

            </form>
        );
    }
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({ fetchRoverData }, dispatch);
}

export default connect(null, mapDispatchToProps)(QueryBar);

然后是rover_select.js

class SelectRover extends Component {
    constructor(props) {
        super(props);

        this.state = { rovervalue: 'opportunity' };

        this.onInputChange = this.onInputChange.bind(this);
    }

    onInputChange(event) {

        this.setState({ rovervalue: event.target.value });

        this.props.fetchRoverName(this.state.rovervalue);

        console.log('rover selected',this.state.rovervalue);
    }

    render() {
        return (

                <label>
                    Select A Rover:                 
                        <select value={this.state.rovervalue} onChange={this.onInputChange} className="form-control" name="Rovers">
                            <option value="curiosity">Curiosity</option>
                            <option value="opportunity">Opportunity</option>
                            <option value="spirit">Spirit</option>
                        </select>
                </label>
        );
    }
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({ fetchRoverName }, dispatch);
}

export default connect(null, mapDispatchToProps)(SelectRover);

基本上我从Stephen Grider的React课程中大量修改了代码，该代码的一部分也是一个名为index.js的动作创建者js文件，它使用axios和promises，在该组件中有一个名为fetchRoverData（date）的函数获取从搜索栏输入的日期，并将用户输入的日期放入并添加到网址，我基本上尝试做同样的事情，但是用户选择下拉列表并将该值添加到网址这是在我的actions文件夹中的index.js中创建的。

index.js（在我的动作文件夹中）

const API_KEY= 'D5XmTzyRFPHDzKv3yBRMWwwtfYd7Ui986j8vC2KM';

const ROVER_NAME='opportunity';

const FIRST_PART_ROOT_URL = `https://api.nasa.gov/mars-photos/api/v1/rovers/${ROVER_NAME}/photos?earth_date=`;

const SECOND_PART_ROOT_URL = `&api_key=${API_KEY}`;

export const FETCH_ROVER_DATA = 'FETCH_ROVER_DATA';

export function fetchRoverName(name) {
        return {
        type: ROVER_NAME,
    };

}

export function fetchRoverData(date) {

    const url = `${FIRST_PART_ROOT_URL}${date}${SECOND_PART_ROOT_URL}`;

    const request = axios.get(url);

    console.log('Request:', request);

    return {
        type: FETCH_ROVER_DATA,
        payload: request
    };
}

这个项目的所有源代码都是here（这是没有下拉列表的1.0版本，它只使用一个硬编码的漫游器名称）。有人能指出我应该如何进行的正确方向吗？选择下拉是否应该是一个单独的组件？

Answer 1

您可以将其保留为一个组件，并将您引用的<select>标记放在query_bar组件中。

然后允许用户输入日期并选择流动站名称，更新组件状态变量中的新值，即使用this.setState({ nameOfStateVariable: newValue});

然后在用户提交的操作中调用一个函数（fetchRoverData()）。当你调用函数，即fetchRoverData(date, rover_name)时，发送日期和rover_name，并将它们全部替换为你在index.js中的正确位置的url（在actions文件夹中）

希望这有帮助

重新构建我的应用后续步骤？

1 个答案: